From 9e219e4af714812a77600caeb928fb3e4457b56e Mon Sep 17 00:00:00 2001 From: VK <370725567@qq.com> Date: Mon, 4 Dec 2023 17:05:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=91=E5=AD=98=E5=82=A8?= =?UTF-8?q?=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/storage/ext-storage-qiniu.vue | 126 +++++++++++++++------------- pages/storage/space-storage.vue | 57 ++++++++----- 2 files changed, 105 insertions(+), 78 deletions(-) diff --git a/pages/storage/ext-storage-qiniu.vue b/pages/storage/ext-storage-qiniu.vue index 4b280d8..513ef2c 100644 --- a/pages/storage/ext-storage-qiniu.vue +++ b/pages/storage/ext-storage-qiniu.vue @@ -5,12 +5,12 @@ 各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。 - + - + 先调用uni.chooseImage选完文件/图片/视频后用uni.uploadFile方法上传 - + 上传完成后设置为私有文件 @@ -26,7 +26,7 @@ }, mounted() {}, methods: { - upload(isPrivate) { + chooseImage(isPrivate) { new Promise((resolve, reject) => { uni.chooseImage({ count: 1, @@ -37,7 +37,8 @@ ext = res.tempFiles[0].name.split('.').pop() const options = { filePath: path, - cloudPath: Date.now() + '.' + ext + cloudPath: Date.now() + '.' + ext, + isPrivate } resolve(options) // #endif @@ -61,55 +62,8 @@ reject(new Error('Fail_Cancel')) } }) - }).then(async (options) => { - uni.showLoading({ - title: '文件上传中...' - }) - const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", { - customUI: true - }); - const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({ - cloudPath: `test/${Date.now()}.jpg`, // 支持自定义目录 - }); - console.log('uploadFileOptionsRes: ', uploadFileOptionsRes) - return new Promise((resolve, reject) => { - const uploadTask = uni.uploadFile({ - ...uploadFileOptionsRes.uploadFileOptions, // 上传文件所需参数 - filePath: options.filePath, // 本地文件路径 - success: () => { - const res = { - cloudPath: uploadFileOptionsRes.cloudPath, // 文件云端路径 - fileID: uploadFileOptionsRes.fileID, // 文件ID - fileURL: uploadFileOptionsRes.fileURL, // 文件URL(如果是私有权限,则此URL是无法直接访问的) - }; - resolve(res); - }, - fail: (err) => { - reject(err); - } - }); - // 监听上传进度 - uploadTask.onProgressUpdate((res) => { - console.log("监听上传进度", res); - }); - }); - }).then(async res => { - console.log(res); - if (isPrivate) { - // 设为私有文件 - const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", { - customUI: true - }); - await uniCloudStorageExtCo.setFilePrivate({ - fileID: res.fileID - }); - this.privateFileID = res.fileID; - } - uni.showModal({ - content: '图片上传成功,fileID为:' + res.fileID, - showCancel: false - }) - uni.hideLoading() + }).then((options) => { + this.uploadFile(options); }).catch((err) => { uni.hideLoading() console.log(err); @@ -121,12 +75,68 @@ } }) }, - async getTempFileURL(){ + async uploadFile(options) { + uni.showLoading({ + title: '文件上传中...' + }) + const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", { + customUI: true + }); + const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({ + cloudPath: `test/${Date.now()}.jpg`, // 支持自定义目录 + }); + console.log('uploadFileOptionsRes: ', uploadFileOptionsRes) + const uploadTask = uni.uploadFile({ + ...uploadFileOptionsRes.uploadFileOptions, // 上传文件所需参数 + filePath: options.filePath, // 本地文件路径 + success: async () => { + const res = { + cloudPath: uploadFileOptionsRes.cloudPath, // 文件云端路径 + fileID: uploadFileOptionsRes.fileID, // 文件ID + fileURL: uploadFileOptionsRes.fileURL, // 文件URL(如果是私有权限,则此URL是无法直接访问的) + }; + // 上传成功后的逻辑 + console.log(res); + if (options.isPrivate) { + // 设为私有文件 + const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", { + customUI: true + }); + await uniCloudStorageExtCo.setFilePrivate({ + fileID: res.fileID + }); + this.privateFileID = res.fileID; + } + uni.showModal({ + content: '图片上传成功,fileID为:' + res.fileID, + showCancel: false + }) + }, + fail: (err) => { + // 上传失败后的逻辑 + console.log(err); + if (err.message !== 'Fail_Cancel') { + uni.showModal({ + content: `图片上传失败,错误信息为:${err.message}`, + showCancel: false + }) + } + }, + complete: () => { + uni.hideLoading() + } + }); + // 监听上传进度 + uploadTask.onProgressUpdate((res) => { + console.log("监听上传进度", res); + }); + }, + async getTempFileURL() { const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co"); let res = await uniCloudStorageExtCo.getTempFileURL({ - fileList: [ this.privateFileID ] + fileList: [this.privateFileID] }); - let tempFileURL = res[0].tempFileURL; + let tempFileURL = res.fileList[0].tempFileURL; uni.showModal({ content: '图片临时下载链接为:' + tempFileURL, showCancel: false @@ -165,4 +175,4 @@ .upload-preview { width: 100%; } - + \ No newline at end of file diff --git a/pages/storage/space-storage.vue b/pages/storage/space-storage.vue index e8cdeb7..94a55f5 100644 --- a/pages/storage/space-storage.vue +++ b/pages/storage/space-storage.vue @@ -8,7 +8,7 @@ - + 先调用uni.chooseImage选完文件/图片/视频后用uniCloud.uploadFile方法上传 调用uniCloud.chooseAndUploadFile方法选择文件/图片/视频直接上传 @@ -29,7 +29,7 @@ }) uniCloud.chooseAndUploadFile({ type: 'image', - onChooseFile:(res)=> { + onChooseFile: (res) => { console.log(res); const processAll = [] for (let i = 0; i < res.tempFiles.length; i++) { @@ -96,7 +96,7 @@ // #endif }) }, - upload() { + chooseImage() { new Promise((resolve, reject) => { uni.chooseImage({ count: 1, @@ -132,22 +132,7 @@ } }) }).then((options) => { - uni.showLoading({ - title: '文件上传中...' - }) - return uniCloud.uploadFile({ - ...options, - onUploadProgress(e) { - console.log(e) - } - }) - }).then(res => { - uni.hideLoading() - console.log(res); - uni.showModal({ - content: '图片上传成功,fileID为:' + res.fileID, - showCancel: false - }) + this.uploadFile(options); }).catch((err) => { uni.hideLoading() console.log(err); @@ -158,6 +143,38 @@ }) } }) + }, + uploadFile(options) { + uni.showLoading({ + title: '文件上传中...' + }) + uniCloud.uploadFile({ + ...options, + onUploadProgress(e) { + console.log(e) + }, + success: (res) => { + // 上传成功后的逻辑 + console.log(res); + uni.showModal({ + content: '图片上传成功,fileID为:' + res.fileID, + showCancel: false + }) + }, + fail: (err) => { + // 上传失败后的逻辑 + console.log(err); + if (err.message !== 'Fail_Cancel') { + uni.showModal({ + content: `图片上传失败,错误信息为:${err.message}`, + showCancel: false + }) + } + }, + complete: () => { + uni.hideLoading() + } + }) } } } @@ -192,4 +209,4 @@ .upload-preview { width: 100%; } - + \ No newline at end of file -- GitLab