使用vue多组图片上传

本文使用原生的上传有局限性，ios手机能同时选择多张图片，而安卓手机只能一张一张上传，不能一次性选择多张。所以建议调用 微信JS SDK。

代码如下：

.js文件，需要获取后台签名。

import Axios from 'axios'
export default {getSign (module) {return new Promise(function (resolve, reject) {// Axios.post('http://test.enlife.jjcclife.com/api/user/upload/sign?token=e1411e831c3a054610427bca05385583', {Axios.post('/api/images/sign', {module: module}).then(function (res) {let datas = res.dataif (datas.code === SUCCESS_CODE) {resolve(datas)} else {reject(datas)}}).catch(function (err) {reject(err)})})},randomString (len) {len = len || 32let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'let maxPos = chars.lengthlet pwd = ''for (let i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos))}return pwd},convertBase64UrlToBlob (urlData) {let bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte// 处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length)let ia = new Uint8Array(ab)let mimeString = urlData.split(',')[0].split(':')[1].split(';')[0]for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i)}return new Blob([ab], {type: mimeString})},getFormDataParams (sign, fileName) {// 构造formdata表单数据let ossData = new FormData()// let key = sign.dir + '/' + this.randomString() + '.' + fileName.split('.')[1]let key = ''if (/\/$/.test(sign.dir)) {key = sign.dir + this.randomString() + '.' + fileName.split('.')[1]} else {key = sign.dir + '/' + this.randomString() + '.' + fileName.split('.')[1]}console.log('key', key)ossData.append('OSSAccessKeyId', sign.accessid)ossData.append('policy', sign.policy)ossData.append('Signature', sign.signature)ossData.append('success_action_status', 200)ossData.append('key', key)return ossData},compress (img, quality) {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')// 瓦片canvaslet tCanvas = document.createElement('canvas')let tctx = tCanvas.getContext('2d')// let maxSize = 200 * 1024 // 200KBquality = quality || 0.8 // 图片压缩质量let initSize = img.src.lengthlet width = img.widthlet height = img.height// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下let ratioif ((ratio = width * height / 4000000) > 1) {ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height//  铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)// 如果图片像素大于100万则使用瓦片绘制let countif ((count = width * height / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片//      计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)}}} else {ctx.drawImage(img, 0, 0, width, height)}// 进行最小压缩let ndata = canvas.toDataURL('image/jpeg', quality)// console.log('压缩前：' + initSize)// console.log('压缩后：' + ndata.length)// console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%')tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0// document.write(ndata);if (initSize > ndata.length) { // 压缩后比原来还大，就使用原图return ndata} else {// return img.srcreturn ndata}}
}

卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云