Skip to content

H
hello-uniCloud

DCloud / hello-uniCloud

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

新增扩展存储-七牛云的演示页面（需要改下自定义域名）

上级 76dfb82c
隐藏空白更改
内联 并排
Showing with 456 addition and 156 deletion
pages.json
浏览文件 @ ec31e9ab
......@@ -99,6 +99,20 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/storage/space-storage",
"style": {
"navigationBarTitleText": "空间内置云存储",
"enablePullDownRefresh": false
}
},
{
"path": "pages/storage/ext-storage-qiniu",
"style": {
"navigationBarTitleText": "扩展存储-七牛云",
"enablePullDownRefresh": false
}
},
{
"path": "pages/schema2code/schema2code",
"style": {
......
pages/storage/ext-storage-qiniu.vue 0 → 100644
浏览文件 @ ec31e9ab
<template>
<view class="content">
<view class="title">直接上传文件到扩展存储-七牛云</view>
<view class="tips">
<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>
</view>
<view class="btn-list">
<button type="primary" plain @click="upload(false)">选择文件“后”上传</button>
<text class="tips">先调用uni.chooseImage选完文件/图片/视频后用uni.uploadFile方法上传</text>
<button type="primary" plain @click="upload(true)">上传并设为私有文件</button>
<text class="tips">上传完成后设置为私有文件</text>
<button type="primary" plain @click="getTempFileURL()" v-if="privateFileID">获取私有文件临时下载链接</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
privateFileID: ""
}
},
mounted() {},
methods: {
upload(isPrivate) {
new Promise((resolve, reject) => {
uni.chooseImage({
count: 1,
success: res => {
const path = res.tempFilePaths[0]
let ext
// #ifdef H5
ext = res.tempFiles[0].name.split('.').pop()
const options = {
filePath: path,
cloudPath: Date.now() + '.' + ext
}
resolve(options)
// #endif
// #ifndef H5
uni.getImageInfo({
src: path,
success(info) {
const options = {
filePath: path,
cloudPath: Date.now() + '.' + info.type.toLowerCase()
}
resolve(options)
},
fail(err) {
reject(new Error(err.errMsg || '未能获取图片类型'))
}
})
// #endif
},
fail: () => {
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()
}).catch((err) => {
uni.hideLoading()
console.log(err);
if (err.message !== 'Fail_Cancel') {
uni.showModal({
content: `图片上传失败，错误信息为：${err.message}`,
showCancel: false
})
}
})
},
async getTempFileURL(){
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
let res = await uniCloudStorageExtCo.getTempFileURL({
fileList: [ this.privateFileID ]
});
let tempFileURL = res[0].tempFileURL;
uni.showModal({
content: '图片临时下载链接为：' + tempFileURL,
showCancel: false
})
}
}
}
</script>
<style>
.content {
padding-bottom: 30px;
}
.title {
font-weight: bold;
text-align: center;
padding: 20px 0px;
font-size: 20px;
}
.tips {
color: #999999;
font-size: 14px;
padding: 20px 30px;
}
.btn-list {
padding: 0px 30px;
}
.btn-list button {
margin-top: 20px;
}
.upload-preview {
width: 100%;
}
</style>
pages/storage/space-storage.vue 0 → 100644
浏览文件 @ ec31e9ab
<template>
<view class="content">
<view class="title">直接上传文件到云存储</view>
<view class="tips">
<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>
</view>
<view class="btn-list">
<button type="primary" plain @click="upload">选择文件“后”上传</button>
<text class="tips">先调用uni.chooseImage选完文件/图片/视频后用uniCloud.uploadFile方法上传</text>
<button type="primary" plain @click="chooseAndUploadFile()">选择文件“并”上传</button>
<text class="tips">调用uniCloud.chooseAndUploadFile方法选择文件/图片/视频直接上传</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
mounted() {},
methods: {
chooseAndUploadFile(file) {
uni.showLoading({
title: '文件上传中...'
})
uniCloud.chooseAndUploadFile({
type: 'image',
onChooseFile:(res)=> {
console.log(res);
const processAll = []
for (let i = 0; i < res.tempFiles.length; i++) {
processAll.push(this.cropImg(res.tempFiles[i]))
}
return Promise.all(processAll).then((fileList) => {
let result = {
tempFilePaths: []
}
result.tempFiles = fileList.map((fileItem, index) => {
result.tempFilePaths.push(fileItem.path)
return {
path: fileItem.path,
cloudPath: '' + Date.now() + index + '.' + fileItem.ext, // 云端路径，这里随便生成了一个
fileType: fileItem.fileType
}
})
return result
})
}
}).then(res => {
console.log(res)
uni.showModal({
content: JSON.stringify(res),
showCancel: false
});
}).catch((err) => {
console.log(err);
uni.showModal({
content: JSON.stringify(err),
showCancel: false
});
}).finally(() => {
uni.hideLoading()
})
},
cropImg(file) {
return new Promise((resolve, reject) => {
let ext
let filePathProcessed = file.path // 处理结果
// #ifdef H5
ext = file.name.split('.').pop()
resolve({
path: filePathProcessed,
ext,
fileType: file.fileType
})
// #endif
// #ifndef H5
uni.getImageInfo({
src: file.path,
success(info) {
ext = info.type.toLowerCase()
resolve({
path: filePathProcessed,
ext,
fileType: file.fileType
})
},
fail(err) {
reject(new Error(err.errMsg || '未能获取图片类型'))
}
})
// #endif
})
},
upload() {
new Promise((resolve, reject) => {
uni.chooseImage({
count: 1,
success: res => {
const path = res.tempFilePaths[0]
let ext
// #ifdef H5
ext = res.tempFiles[0].name.split('.').pop()
const options = {
filePath: path,
cloudPath: Date.now() + '.' + ext
}
resolve(options)
// #endif
// #ifndef H5
uni.getImageInfo({
src: path,
success(info) {
const options = {
filePath: path,
cloudPath: Date.now() + '.' + info.type.toLowerCase()
}
resolve(options)
},
fail(err) {
reject(new Error(err.errMsg || '未能获取图片类型'))
}
})
// #endif
},
fail: () => {
reject(new Error('Fail_Cancel'))
}
})
}).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
})
}).catch((err) => {
uni.hideLoading()
console.log(err);
if (err.message !== 'Fail_Cancel') {
uni.showModal({
content: `图片上传失败，错误信息为：${err.message}`,
showCancel: false
})
}
})
}
}
}
</script>
<style>
.content {
padding-bottom: 30px;
}
.title {
font-weight: bold;
text-align: center;
padding: 20px 0px;
font-size: 20px;
}
.tips {
color: #999999;
font-size: 14px;
padding: 20px 30px;
}
.btn-list {
padding: 0px 30px;
}
.btn-list button {
margin-top: 20px;
}
.upload-preview {
width: 100%;
}
</style>
pages/storage/storage.vue
浏览文件 @ ec31e9ab
<template>
<view class="content">
<view class="title">直接上传文件到云存储</view>
<view class="tips">
<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>
</view>
<view class="btn-list">
<button type="primary" plain @click="upload">选择文件“后”上传</button>
<text class="tips">先调用chooseImage选完文件/图片/视频后用uploadFile方法上传</text>
<button type="primary" plain @click="chooseAndUploadFile()">选择文件“并”上传</button>
<text class="tips">调用chooseAndUploadFile方法选择文件/图片/视频直接上传</text>
<button type="primary" plain @click="pageTo('/pages/storage/space-storage')">空间内置云存储</button>
<text class="tips">演示空间自带的云储存</text>
<button type="primary" plain @click="pageTo('/pages/storage/ext-storage-qiniu')">扩展存储-七牛云</button>
<text class="tips">演示扩展存储-七牛云</text>
</view>
</view>
</template>
......@@ -23,141 +16,10 @@
},
mounted() {},
methods: {
chooseAndUploadFile(file) {
uni.showLoading({
title: '文件上传中...'
})
uniCloud.chooseAndUploadFile({
type: 'image',
onChooseFile:(res)=> {
console.log(res);
const processAll = []
for (let i = 0; i < res.tempFiles.length; i++) {
processAll.push(this.cropImg(res.tempFiles[i]))
}
return Promise.all(processAll).then((fileList) => {
let result = {
tempFilePaths: []
}
result.tempFiles = fileList.map((fileItem, index) => {
result.tempFilePaths.push(fileItem.path)
return {
path: fileItem.path,
cloudPath: '' + Date.now() + index + '.' + fileItem.ext, // 云端路径，这里随便生成了一个
fileType: fileItem.fileType
}
})
return result
})
}
}).then(res => {
console.log(res)
uni.showModal({
content: JSON.stringify(res),
showCancel: false
});
}).catch((err) => {
console.log(err);
uni.showModal({
content: JSON.stringify(err),
showCancel: false
});
}).finally(() => {
uni.hideLoading()
})
},
cropImg(file) {
return new Promise((resolve, reject) => {
let ext
let filePathProcessed = file.path // 处理结果
// #ifdef H5
ext = file.name.split('.').pop()
resolve({
path: filePathProcessed,
ext,
fileType: file.fileType
})
// #endif
// #ifndef H5
uni.getImageInfo({
src: file.path,
success(info) {
ext = info.type.toLowerCase()
resolve({
path: filePathProcessed,
ext,
fileType: file.fileType
})
},
fail(err) {
reject(new Error(err.errMsg || '未能获取图片类型'))
}
})
// #endif
})
},
upload() {
new Promise((resolve, reject) => {
uni.chooseImage({
count: 1,
success: res => {
const path = res.tempFilePaths[0]
let ext
// #ifdef H5
ext = res.tempFiles[0].name.split('.').pop()
const options = {
filePath: path,
cloudPath: Date.now() + '.' + ext
}
resolve(options)
// #endif
// #ifndef H5
uni.getImageInfo({
src: path,
success(info) {
const options = {
filePath: path,
cloudPath: Date.now() + '.' + info.type.toLowerCase()
}
resolve(options)
},
fail(err) {
reject(new Error(err.errMsg || '未能获取图片类型'))
}
})
// #endif
},
fail: () => {
reject(new Error('Fail_Cancel'))
}
})
}).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
})
}).catch((err) => {
uni.hideLoading()
console.log(err);
if (err.message !== 'Fail_Cancel') {
uni.showModal({
content: `图片上传失败，错误信息为：${err.message}`,
showCancel: false
})
}
})
pageTo(url){
uni.navigateTo({
url
});
}
}
}
......@@ -168,13 +30,6 @@
padding-bottom: 30px;
}
.title {
font-weight: bold;
text-align: center;
padding: 20px 0px;
font-size: 20px;
}
.tips {
color: #999999;
font-size: 14px;
......@@ -189,7 +44,4 @@
margin-top: 20px;
}
.upload-preview {
width: 100%;
}
</style>
uniCloud-aliyun/cloudfunctions/ext-storage-co/index.obj.js 0 → 100644
浏览文件 @ ec31e9ab
// 扩展存储自定义域名
const domain = "qiniu01.dcloud.net.cn";
module.exports = {
_before() {},
getUploadFileOptions(data = {}) {
let {
cloudPath, // 前端传过来的文件路径
} = data;
// 可以在此先判断下此路径是否允许上传等逻辑
// ...
// 然后获取 extStorageManager 对象实例
const extStorageManager = uniCloud.getExtStorageManager({
provider: "qiniu", // 扩展存储供应商
domain: domain, // 带http协议头的域名地址
});
// 最后调用 extStorageManager.getUploadFileOptions
let uploadFileOptionsRes = extStorageManager.getUploadFileOptions({
cloudPath: cloudPath,
allowUpdate: false, // 是否允许覆盖更新，如果返回前端，建议设置false，代表仅新增，不可覆盖
});
return uploadFileOptionsRes;
},
// 设置文件为私有权限
async setFilePrivate(data = {}) {
let {
fileID
} = data;
// 可以在此先判断下此路径是否允许设置为私有权限
// ...
// 然后获取 extStorageManager 对象实例
const extStorageManager = uniCloud.getExtStorageManager({
provider: "qiniu", // 扩展存储供应商
domain: domain, // 带http协议头的域名地址
});
let res = await extStorageManager.updateFileStatus({
fileID, // 私有文件id
isPrivate: true, // true 私有 false 公共
});
console.log('updateFileStatus: ', res);
return res;
},
// 获取临时下载链接
async getTempFileURL(data = {}) {
let {
fileList
} = data;
// 可以在此先判断下是否有权限访问这些私有文件
// ...
// 然后获取 extStorageManager 对象实例
const extStorageManager = uniCloud.getExtStorageManager({
provider: "qiniu", // 扩展存储供应商
domain: domain, // 带http协议头的域名地址
});
let res = extStorageManager.getTempFileURL({
fileList
});
console.log('getTempFileURL: ', res);
return res;
},
}
\ No newline at end of file
uniCloud-aliyun/cloudfunctions/ext-storage-co/package.json 0 → 100644
浏览文件 @ ec31e9ab
{
"name": "ext-storage-co",
"dependencies": {},
"extensions": {
"uni-cloud-ext-storage": {}
}
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或