提交 9e219e4a 编写于 作者: VK1688's avatar VK1688 提交者: Anne_LXM

修改云存储演示页面逻辑

上级 758f3d47
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
<text> <text>
各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。 各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
</text> </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>
<view class="btn-list"> <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> <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> <text class="tips">上传完成后设置为私有文件</text>
<button type="primary" plain @click="getTempFileURL()" v-if="privateFileID">获取私有文件临时下载链接</button> <button type="primary" plain @click="getTempFileURL()" v-if="privateFileID">获取私有文件临时下载链接</button>
</view> </view>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
}, },
mounted() {}, mounted() {},
methods: { methods: {
upload(isPrivate) { chooseImage(isPrivate) {
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
uni.chooseImage({ uni.chooseImage({
count: 1, count: 1,
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
ext = res.tempFiles[0].name.split('.').pop() ext = res.tempFiles[0].name.split('.').pop()
const options = { const options = {
filePath: path, filePath: path,
cloudPath: Date.now() + '.' + ext cloudPath: Date.now() + '.' + ext,
isPrivate
} }
resolve(options) resolve(options)
// #endif // #endif
...@@ -61,7 +62,20 @@ ...@@ -61,7 +62,20 @@
reject(new Error('Fail_Cancel')) reject(new Error('Fail_Cancel'))
} }
}) })
}).then(async (options) => { }).then((options) => {
this.uploadFile(options);
}).catch((err) => {
uni.hideLoading()
console.log(err);
if (err.message !== 'Fail_Cancel') {
uni.showModal({
content: `图片上传失败,错误信息为:${err.message}`,
showCancel: false
})
}
})
},
async uploadFile(options) {
uni.showLoading({ uni.showLoading({
title: '文件上传中...' title: '文件上传中...'
}) })
...@@ -72,30 +86,18 @@ ...@@ -72,30 +86,18 @@
cloudPath: `test/${Date.now()}.jpg`, // 支持自定义目录 cloudPath: `test/${Date.now()}.jpg`, // 支持自定义目录
}); });
console.log('uploadFileOptionsRes: ', uploadFileOptionsRes) console.log('uploadFileOptionsRes: ', uploadFileOptionsRes)
return new Promise((resolve, reject) => {
const uploadTask = uni.uploadFile({ const uploadTask = uni.uploadFile({
...uploadFileOptionsRes.uploadFileOptions, // 上传文件所需参数 ...uploadFileOptionsRes.uploadFileOptions, // 上传文件所需参数
filePath: options.filePath, // 本地文件路径 filePath: options.filePath, // 本地文件路径
success: () => { success: async () => {
const res = { const res = {
cloudPath: uploadFileOptionsRes.cloudPath, // 文件云端路径 cloudPath: uploadFileOptionsRes.cloudPath, // 文件云端路径
fileID: uploadFileOptionsRes.fileID, // 文件ID fileID: uploadFileOptionsRes.fileID, // 文件ID
fileURL: uploadFileOptionsRes.fileURL, // 文件URL(如果是私有权限,则此URL是无法直接访问的) fileURL: uploadFileOptionsRes.fileURL, // 文件URL(如果是私有权限,则此URL是无法直接访问的)
}; };
resolve(res); // 上传成功后的逻辑
},
fail: (err) => {
reject(err);
}
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log("监听上传进度", res);
});
});
}).then(async res => {
console.log(res); console.log(res);
if (isPrivate) { if (options.isPrivate) {
// 设为私有文件 // 设为私有文件
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", { const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co", {
customUI: true customUI: true
...@@ -109,9 +111,9 @@ ...@@ -109,9 +111,9 @@
content: '图片上传成功,fileID为:' + res.fileID, content: '图片上传成功,fileID为:' + res.fileID,
showCancel: false showCancel: false
}) })
uni.hideLoading() },
}).catch((err) => { fail: (err) => {
uni.hideLoading() // 上传失败后的逻辑
console.log(err); console.log(err);
if (err.message !== 'Fail_Cancel') { if (err.message !== 'Fail_Cancel') {
uni.showModal({ uni.showModal({
...@@ -119,14 +121,22 @@ ...@@ -119,14 +121,22 @@
showCancel: false showCancel: false
}) })
} }
})
}, },
async getTempFileURL(){ complete: () => {
uni.hideLoading()
}
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log("监听上传进度", res);
});
},
async getTempFileURL() {
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co"); const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
let res = await uniCloudStorageExtCo.getTempFileURL({ let res = await uniCloudStorageExtCo.getTempFileURL({
fileList: [ this.privateFileID ] fileList: [this.privateFileID]
}); });
let tempFileURL = res[0].tempFileURL; let tempFileURL = res.fileList[0].tempFileURL;
uni.showModal({ uni.showModal({
content: '图片临时下载链接为:' + tempFileURL, content: '图片临时下载链接为:' + tempFileURL,
showCancel: false showCancel: false
......
...@@ -8,7 +8,7 @@ ...@@ -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> <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>
<view class="btn-list"> <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> <text class="tips">先调用uni.chooseImage选完文件/图片/视频后用uniCloud.uploadFile方法上传</text>
<button type="primary" plain @click="chooseAndUploadFile()">选择文件“并”上传</button> <button type="primary" plain @click="chooseAndUploadFile()">选择文件“并”上传</button>
<text class="tips">调用uniCloud.chooseAndUploadFile方法选择文件/图片/视频直接上传</text> <text class="tips">调用uniCloud.chooseAndUploadFile方法选择文件/图片/视频直接上传</text>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
}) })
uniCloud.chooseAndUploadFile({ uniCloud.chooseAndUploadFile({
type: 'image', type: 'image',
onChooseFile:(res)=> { onChooseFile: (res) => {
console.log(res); console.log(res);
const processAll = [] const processAll = []
for (let i = 0; i < res.tempFiles.length; i++) { for (let i = 0; i < res.tempFiles.length; i++) {
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
// #endif // #endif
}) })
}, },
upload() { chooseImage() {
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
uni.chooseImage({ uni.chooseImage({
count: 1, count: 1,
...@@ -132,24 +132,37 @@ ...@@ -132,24 +132,37 @@
} }
}) })
}).then((options) => { }).then((options) => {
this.uploadFile(options);
}).catch((err) => {
uni.hideLoading()
console.log(err);
if (err.message !== 'Fail_Cancel') {
uni.showModal({
content: `图片上传失败,错误信息为:${err.message}`,
showCancel: false
})
}
})
},
uploadFile(options) {
uni.showLoading({ uni.showLoading({
title: '文件上传中...' title: '文件上传中...'
}) })
return uniCloud.uploadFile({ uniCloud.uploadFile({
...options, ...options,
onUploadProgress(e) { onUploadProgress(e) {
console.log(e) console.log(e)
} },
}) success: (res) => {
}).then(res => { // 上传成功后的逻辑
uni.hideLoading()
console.log(res); console.log(res);
uni.showModal({ uni.showModal({
content: '图片上传成功,fileID为:' + res.fileID, content: '图片上传成功,fileID为:' + res.fileID,
showCancel: false showCancel: false
}) })
}).catch((err) => { },
uni.hideLoading() fail: (err) => {
// 上传失败后的逻辑
console.log(err); console.log(err);
if (err.message !== 'Fail_Cancel') { if (err.message !== 'Fail_Cancel') {
uni.showModal({ uni.showModal({
...@@ -157,6 +170,10 @@ ...@@ -157,6 +170,10 @@
showCancel: false showCancel: false
}) })
} }
},
complete: () => {
uni.hideLoading()
}
}) })
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册