Skip to content

H
hello-uniCloud

DCloud / hello-uniCloud

通知 294
Star 3
Fork 2
H
hello-uniCloud
提交 9e219e4a 编写于 作者: VK1688's avatar VK1688 提交者： Anne_LXM
浏览文件
操作

修改云存储演示页面逻辑

上级 758f3d47
隐藏空白更改
内联 并排
Showing with 105 addition and 78 deletion
pages/storage/ext-storage-qiniu.vue
浏览文件 @ 9e219e4a
......@@ -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
浏览文件 @ 9e219e4a
......@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或