2023年7月17日发(作者：)

⽤element的upload组件实现多图⽚上传和压缩的⽰例代码我⽤vuex做状态管理，七⽜云做图床。项⽬地址：效果展⽰项⽬执⾏流程⾸先，让我们来分析⼀下实现多图⽚上传的流程：前端向后端请求⽤来上传图⽚⾄服务器的token后端为每张要上传的图⽚⽣成⼀个图⽚名，并⽤这个图⽚名⽣成token后端将图⽚名和token返回给前端前端拿到token以后，将图⽚上传⾄服务器上传成功以后，前端将图⽚名发给后端后端将图⽚名存⼊数据库项⽬实现过程1.我们要利⽤element-ui的Upload组件布置界⾯：// domain 指的是我们的上传地址，upqiniu 是我们⾃定义的上传⽅法，beforeUpload 是图⽚上传前执⾏的⽅法。关于该组件的其他⽤法可以在element的官⽅⽂档查阅：2.对图⽚进⾏压缩// Quality: 0.5, //压缩图⽚的质量dataURItoBlob(dataURI, type) { var binary = atob((',')[1]); var array = []; for(var i = 0; i < ; i++) { (deAt(i)); } return new Blob([new Uint8Array(array)], {type: type});},beforeUpload(param) { //对图⽚进⾏压缩 const imgSize = / 1024 / 1024 if(imgSize > 1) { const _this = this return new Promise(resolve => { const reader = new FileReader() const image = new Image() = (imageEvent) => { const canvas = Element('canvas'); const context = text('2d'); const width = * _lity const height = * _lity = width; = height; ect(0, 0, width, height); age(image, 0, 0, width, height); const dataUrl = URL(); const blobData = _ItoBlob(dataUrl, ); resolve(blobData) } = (e => { = ; }); DataURL(param); }) }}压缩图⽚实现起来⽐较简单。就是在beforeUpload()⽅法⾥⾯return⼀个Promise，Promise⾥⾯我们把图⽚的长度和宽度按⽐例进⾏缩⼩，并把图⽚画到canvas上，然后把canvas转成⼀个blod对象。3.前端向后端请求上传token。//iniu(param) { let filetype = '' if ( === 'image/png') { filetype = 'png' } else { filetype = 'jpg' } const formdata = { filetype: filetype, param: param } GetUploadToken(formdata)

}// vuex/onGetUploadToken({commit}, obj) { const msg = { filetype: pe } UploadToken(msg).then((response) => { if(ode === 200) { commit('uploadImg', {'token': , 'key': , 'param': }) }

}, (error) => { (`获取图⽚上传凭证错误：${error}`) commit('uploadImgError') })},4.后端⽣成上传token，并发给前端，我⽤Python实现。filetype = ('filetype')# 构建鉴权对象q = Auth(('qiniu').get('AK'), ('qiniu').get('SK'))# ⽣成图⽚名salt = ''.join((_letters + , 8))key = salt + '_' + str(int(())) + '.' + filetype# ⽣成上传 Token，可以指定过期时间等token = _token(('qiniu').get('bucket_name'), key, 3600)return Response({"stateCode": 200, "token": token, "key": key}, 200)5.前端接收token，开始向服务器上传图⽚// vuex/ame: [], //图⽚名数组// vuex/adImg(state, msg) { const config = { useCdnDomain: true, region: .z2 } var putExtra = { fname: , params: {}, mimeType: ["image/png", "image/jpeg", "image/gif"] }; var observer = { next(res){ }, error(err){ (`图⽚上传错误信息：${e}`) },

complete(res){ (`图⽚上传成功：${}`) () } } var observable = (, , , putExtra, config) //上传开始 var subscription = ibe(observer)},6.上传成功以后，将图⽚名存⼊数据库// ⽤到的界⾯st = (key => `${ddr}/${key}`)switch() { case 4: 4 = st[3] case 3: 3 = st[2] case 2: 2 = st[1] case 1: 1 = st[0]}let obj = { goods_img1: 1, goods_img2:2, goods_img3:3, goods_img4:4}//将信息发送给后端Publish(obj)以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。