修改云存储演示页面逻辑

pages/storage/ext-storage-qiniu.vue

@@ -5,12 +5,12 @@
 			<text>
 				各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
 			</text>
-			<j-link text="参考" url="https://uniapp.dcloud.io/uniCloud/quickstart?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b8%ad%e4%bd%bf%e7%94%a8unicloud%e7%9a%84%e7%99%bd%e5%90%8d%e5%8d%95%e9%85%8d%e7%bd%ae"></j-link>
+			<j-link text="参考" url="https://uniapp.dcloud.net.cn/uniCloud/ext-storage/dev.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9F%9F%E5%90%8D%E7%99%BD%E5%90%8D%E5%8D%95"></j-link>
 		</view>
 		<view class="btn-list">
-			<button type="primary" plain @click="upload(false)">选择文件“后”上传</button>
+			<button type="primary" plain @click="chooseImage(false)">选择文件“后”上传</button>
 			<text class="tips">先调用uni.chooseImage选完文件/图片/视频后用uni.uploadFile方法上传</text>
-			<button type="primary" plain @click="upload(true)">上传并设为私有文件</button>
+			<button type="primary" plain @click="chooseImage(true)">上传并设为私有文件</button>
 			<text class="tips">上传完成后设置为私有文件</text>
 			<button type="primary" plain @click="getTempFileURL()" v-if="privateFileID">获取私有文件临时下载链接</button>
 		</view>
@@ -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%;
 	}
-</style>
+</style>
\ No newline at end of file

pages/storage/space-storage.vue

@@ -8,7 +8,7 @@
 			<j-link text="参考" url="https://uniapp.dcloud.io/uniCloud/quickstart?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b8%ad%e4%bd%bf%e7%94%a8unicloud%e7%9a%84%e7%99%bd%e5%90%8d%e5%8d%95%e9%85%8d%e7%bd%ae"></j-link>
 		</view>
 		<view class="btn-list">
-			<button type="primary" plain @click="upload">选择文件“后”上传</button>
+			<button type="primary" plain @click="chooseImage">选择文件“后”上传</button>
 			<text class="tips">先调用uni.chooseImage选完文件/图片/视频后用uniCloud.uploadFile方法上传</text>
 			<button type="primary" plain @click="chooseAndUploadFile()">选择文件“并”上传</button>
 			<text class="tips">调用uniCloud.chooseAndUploadFile方法选择文件/图片/视频直接上传</text>
@@ -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%;
 	}
-</style>
+</style>
\ No newline at end of file