Commit 82458758 authored by 李俊赕's avatar 李俊赕

图片上传每次上传只发送一次token获取0.0.5

parent add79579
import uploader from '@/plugins/uploader/index.js'
const globalUrl = process.uniEnv || {}
export default {
name: 'qiniup',
name: 'upload',
components: {},
data() {
return {
......@@ -13,116 +13,44 @@ export default {
uploadToken: '', // 上传token
maximum:999, // 最大上传数量
qiniuOptions: {}, // 七牛上传配置
imgList:[]
};
},
created() {
console.log(uploader,'uploader')
// this.initQiniu()
},
methods: {
async chooseImage(){
let res = await uploader.qnImgUpload()
console.log(res,'res--------qnImgUpload')
},
initQiniu: function() {
var defaulfs = {
// bucket所在区域,这里是华北区。ECN, SCN, NCN, NA, ASG,分别对应七牛云的:华东,华南,华北,北美,新加坡 5 个区域
region: 'ECN',
bucket: 'fa-cms',
qiniuBucketURLPrefix: 'uploads',
// 获取uptoken方法三选一即可,执行优先级为:uptoken > uptokenURL > uptokenFunc。三选一,剩下两个置空。推荐使用uptokenURL,详情请见 README.md
// 由其他程序生成七牛云uptoken,然后直接写入uptoken
uptoken: '',
// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "0MLvWPnyy..."}
uptokenURL: this.uptokenURL,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数,详情请见 README.md
uptokenFunc: function() {
},
// bucket 外链域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain: this.domain,
// qiniuShouldUseQiniuFileName 如果是 true,则文件的 key 由 qiniu 服务器分配(全局去重)。如果是 false,则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑,默认是 false。
// 微信自动生成的 filename较长,导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时,自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件:1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数,可以进行自定义key。(请不要直接在sdk中修改options参数,修改方法请见demo的index.js)
// 通过fileURL下载文件时,自定义下载名,请参考:七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”(https://developer.qiniu.com/kodo/manual/1659/download-setting)。本sdk在README.md的"常见问题"板块中,有"通过fileURL下载文件时,自定义下载名"使用样例。
shouldUseQiniuFileName: true
};
let options = {}
if(Object.keys(this.qiniuOptions).length) {
Object.assign(options, defaulfs, this.qiniuOptions);
} else {
options = defaulfs;
methods: {
async chooseImage(type){
let imageList = []
if(type==='qiniu'){
// 七牛上传
let res = await uploader.qnImgUpload()
console.log(res,'res--------qnImgUpload')
// res.map(item=>{
// imageList.push()
// })
this.imgList = res
return
}
// 将七牛云相关配置初始化进本sdk
qiniuUploader.init(options);
// 本地服务上传
let res = await uploader.urlUpload()
this.imgList = res
},
getUrlKey(file) {
let index = file.lastIndexOf('/');
let len = file.length
let name = file.substring(index + 1, len)
return name;
perviewImg(index) {
let urls = []
this.imgList.map(item => {
urls.push(item.src)
})
uni.previewImage({
current: index,
urls: urls
});
},
/**
* 确认上传
* @param {boolean} submit
*/
confirmUpload(submit = false) {
let self = this
const fileList = self.files
if (self.maximum - fileList.length <= 0) {
uni.showToast({
title: '图片数量不能大于' + self.maximum,
icon: 'none'
})
return
}
for (let file of fileList) {
let name = self.getUrlKey(file)
// 交给七牛上传
let item = {
src: '',
id: '',
key:'',
// filesize: '',
progress: 0
}
const params = {
name:name,
file:file,
}
qiniuUploader.upload(params, (res) => {
console.log(res,'res')
let inLen = self.maximum - fileList.length
if (inLen > 0) {
item.src = file
item.key = res.key || res.src
self.fileMaps.push(item);
self.keys.push(item.key)
if(submit) {
self.submitFile()
}
} else {
uni.showToast({
title: '图片数量不能大于9'
})
}
}, (error) => {
console.log('error: ' + error);
}, null, (res) => {
item.progress = res.progress
}, () => {
// 取消上传
}, () => {
// `before` 上传前执行的操作
}, (err) => {
// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
});
}
}
removeImg(index) {
this.imgList.splice(index, 1)
// this.$emit('image-change', this.imgList) //将图片回传父页面
},
}
}
......@@ -5,14 +5,14 @@
<!-- <view class="tip-sucess u-flex u-row-center" v-if="file && (file.status == status.QUEUED || file.status == status.UPLOADING)">
<span>正在上传中...{{file.percent}}%</span>
</view> -->
<img :src="file.src" mode="aspectFill" @click="perviewImg(index)">
<img :src="file" mode="aspectFill" @click="perviewImg(index)">
<view class="close" @click="removeImg(index)">
<u-icon name="close" color="#fff" size="20"></u-icon>
</view>
</view>
<view>
<view class="pic upload" @click="chooseImage">
<view class="pic upload" @click="chooseImage('qiniu')">
<u-icon name="camera" color="#fff" size="100"></u-icon>
<span class="txt">点击拍摄</span>
</view>
......
......@@ -30,21 +30,44 @@ let uploader = new request(baseOptions);
uploader.getQnToken = function(callback) {
//该地址需要开发者自行配置(每个后台的接口风格都不一样)
// console.log(uploader.get,'uploader.get')
uploader.post(baseOptions.qiniuUploadUrl).then(data => {
/*
*接口返回参数:
*visitPrefix:访问文件的域名
*token:七牛云上传token
*folderPath:上传的文件夹
*region: 地区 默认为:ECN
*/
callback({
visitPrefix: data.visitPrefix || '',
token: data.token || '',
folderPath: data.folderPath || '',
region: "ECN"
});
});
return new Promise((resolve, reject) => {
uploader.post(baseOptions.qiniuUploadUrl).then(data => {
/*
*接口返回参数:
*visitPrefix:访问文件的域名
*token:七牛云上传token
*folderPath:上传的文件夹
*region: 地区 默认为:ECN
*/
resolve({
visitPrefix: data.host || '',
token: data.token || '',
folderPath: data.folderPath || '',
region: "ECN"
})
}).catch(() => {
let err = {
statusCode: 0,
errMsg: "【request】token获取失败"
}
reject(err)
})
})
// uploader.post(baseOptions.qiniuUploadUrl).then(data => {
// /*
// *接口返回参数:
// *visitPrefix:访问文件的域名
// *token:七牛云上传token
// *folderPath:上传的文件夹
// *region: 地区 默认为:ECN
// */
// callback({
// visitPrefix: data.host || '',
// token: data.token || '',
// folderPath: data.folderPath || '',
// region: "ECN"
// });
// });
}
//当前接口请求数
......
......@@ -12,6 +12,7 @@ export default class fileUpload extends request {
constructor(props) {
// 调用实现父类的构造函数
super(props);
this.qiniuTokenObj = null
}
//七牛云上传图片
async qnImgUpload(options = {}) {
......@@ -80,7 +81,12 @@ export default class fileUpload extends request {
}
}
}
let requestResult = await qiniuUpload(requestInfo, this.getQnToken);
let qnRes = this.qiniuTokenObj
if(!qnRes){
qnRes = await this.getQnToken()
this.qiniuTokenObj = qnRes
}
let requestResult = await qiniuUpload(requestInfo, qnRes);
return Promise.resolve(requestResult);
} catch (err) {
this.requestError && this.requestError(err);
......
......@@ -68,15 +68,13 @@ export const chooseVideo = function(data) {
});
}
// 七牛云上传
export const qiniuUpload = function(requestInfo, getQnToken) {
export const qiniuUpload = function(requestInfo, qnRes) {
return new Promise((resolve, reject) => {
if (Array.isArray(requestInfo.files)) {
let len = requestInfo.files.length;
let fileList = new Array;
if (getQnToken) {
console.log(getQnToken,'getQnToken')
getQnToken(qnRes => {
console.log(qnRes,'qnRes')
if (qnRes) {
// getQnToken(qnRes => {
/*
*接口返回参数:
*visitPrefix:访问文件的域名
......@@ -132,7 +130,7 @@ export const qiniuUpload = function(requestInfo, getQnToken) {
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
});
}
});
// });
} else {
reject({
errMsg: "请添加七牛云回调方法:getQnToken",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment