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