import uploader from '@/plugins/uploader/index.js' const globalUrl = process.uniEnv || {} const randomChar = function(l, url = "") { const x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; let tmp = ""; let time = new Date(); for (let i = 0; i < l; i++) { tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length); } return ( "scn/file/" + url + time.getTime() + tmp ); } const formatSize = function(size, pointLength, units) { var unit; units = units || [ 'B', 'K', 'M', 'G' ]; while ( (unit = units.shift()) && size > 1024 ) { size = size / 1024; } return (unit === 'B' ? size : size.toFixed( pointLength === undefined ? 2 : pointLength)) + unit; } export default { name: 'upload', components: {}, data() { return { imgList:[], // 上传文件种类:0--头像、1--证件、2--身份证 categories: ['avatar', 'cert', 'id'], }; }, created() { // this.initQiniu() }, methods: { async uploadPath(type){ // 可以直接上传path const self = this let imgList = [] let options = { files:[] // 文件路径 } if(type==='qiniu'){ let res = await uploader.qnFileUpload(options) return } let res = await uploader.urlFileUpload(options) }, /** * 存储图片到任务队列 * @param {Array} files 图片路径 */ async saveToTask(files, order) { // 生成key返回,然后把key放到异步上传的任务队列 let lists = files.map(v => { const key = randomChar(10) return { time: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss'), key: key, path: v.path, size: formatSize(v.size) || '', src: key, ...order } }) const data = JSON.parse(JSON.stringify(this.uploadTask)) const saveLists = data.concat(lists) const newTotal = this.uploadTotal + lists.length setTimeout(() => { this.$u.vuex('uploadTask', saveLists) this.$u.vuex('uploadTotal', newTotal) }, 1000) //this.$u.vuex('uploadSuccess', 0) return lists }, /** * 选择图片 * @param {Object} data option */ async chooseImg(data, order){ const self = this return new Promise((resolve, reject) => { uni.chooseImage({ count: data.count || 9, //默认9 sizeType: data.sizeType || ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: data.sourceType || ['album', 'camera'], //从相册选择 success: function(res) { const lists = self.saveToTask(res.tempFiles, order) resolve(lists) }, fail: err => { console.log("err", err) } }) }) }, // 保存图片到本地 saveFiles(path) { return new Promise((resolve, reject) => { uni.saveFile({ tempFilePath: path, success(e) { const { savedFilePath } = e const key = randomChar(10) const img = { key: key, path: savedFilePath, src: key } resolve(img) }, fail: reject }) }) }, /** * 上传图片公用组件 * @param {Object} type 文件上传方式 * @param {Object} attr 文件属性:图片种类[category](身份证、证件、头像); * 图片上传其他配置[options】(如,选择图片或拍摄options.consourceType,['album', 'camera'];)其他 */ async chooseImage(type, attr={}){ const self = this let imgList = [] if(type==='qiniu'){ // 图片种类 let category = attr && attr.category || self.categories[0] let config = attr && attr.options || {} // 图片上传参数配置 // 七牛上传 let options = { onProgressUpdate(res){ let item = { path:res.path, // 图片临时缓存路径 key:'', // 图片上传成功后相对路径 src:'', // 访问图片的绝对路径 progress:res.progress // 图片上传进度 } if(res.fileIndexres.fileIndex){ imgList[res.fileIndex].key = res.key imgList[res.fileIndex].src = res.key // uploader.qiniuTokenObj.visitPrefix + res.key } self.imgList = imgList }, cardType: category, ...config } // 不需要进度条等可直接获取 let res = await uploader.qnImgUpload(options) // let imgList = res.map(item=>{ // return { // key:item, // src:uploader.qiniuTokenObj.visitPrefix + item // } // }) // this.imgList = imgList return } // 本地服务上传 let res = await uploader.urlUpload() this.imgList = res }, perviewImg(index) { let urls = [] this.imgList.map(item => { urls.push(item.src) }) uni.previewImage({ current: index, urls: urls }); }, removeImg(index) { this.imgList.splice(index, 1) // this.$emit('image-change', this.imgList) //将图片回传父页面 }, } }