用元素的上传组件实现多图片上传和压缩的示例代码

我用状态管理做状态管理，七牛云做图床。

项目地址：多图片上传组件

效果展示

项目执行流程

首先，让我们来分析一下实现多图片上传的流程：

前端向后端请求用来上传图片至服务器的代币后端为每张要上传的图片生成一个图片名，并用这个图片名生成代币后端将图片名和代币返回给前端前端拿到代币以后，将图片上传至服务器上传成功以后，前端将图片名发给后端后端将图片名存入数据库

项目实现过程

1.我们要利用元素用户界面的上传组件布置界面：

//上传。vueel-upload : action=domain ref=' upload ' accept=' image/JPEG，image/gif，image/png ' : auto-upload=' false ' : http-request=' upqiniu ' : limit=' limit ' : multiple=' multiple ' list-type=' picture-card ' : before-upload=' before ' : on-preview=' handlepicturecard preview '指的是我们的上传地址upqiniu是我们自定义的上传方法，beforeUpload是图片上传前执行的方法。关于该组件的其他用法可以在元素的官方文档查阅：上传上传

2.对图片进行压缩

//upload.vueimgQuality: 0.5，//压缩图片的质量dataURItoBlob(dataURI，类型){ var binary=atob(dataURI.split('，')[1])；定义变量数组=[];for(var I=0；我二进制长度；I){数组。push(二进制。charcodeat(I))；}返回新Blob([new Uint8Array(array)]，{ type : type })；}，beforeUpload(param) { //对图片进行压缩const imgSize=param。size/1024/1024 if(IMgsize 1){ const _ this=this返回new Promise(resolve={ const reader=new file reader())const Image=new Image()Image。onload=(imageEvent)={ const canvas=document。create element(' canvas ')；const上下文=canvas。get context(' 2d ')；常量宽度=图像。宽度* _ this。IMgQuality const height=image。高度* _这个。IMgQuality画布。宽度=宽度；canvas.height=高度；context.clearRect(0，0，宽度，高度);context.drawImage(图像，0,0,宽度，高度);const DataURl=canvas。ToDatoull(参数。类型)；const blob数据=_ this。DatauritoBob(DataURl，param。类型)；resolve(blob数据)}读取器。onload=(e={ image。src=e .目标。结果；});读者。readasdataurl(param)；}) }}压缩图片实现起来比较简单。就是在beforeUpload()方法里面返回一个保证，保证里面我们把图片的长度和宽度按比例进行缩小，并把图片画到帆布上，然后把帆布转成一个二进制数据对象。

3.前端向后端请求上传令牌。

//上传。vueupqiniu(param){ let文件类型=' ' if(param。文件。type==' image/png '){ file type=' png ' } else { file type=' jpg ' } const formdata={ file type : file type，param : param } this。actiongetuploadtoken(formdata)}//vuex/action。jsactiongetuploadtoken({ commit }，obj){ const msg={文件类型： obj。文件类型}然后((响应)={ if(响应。状态代码===200){ commit(' uploadImg '，{'token': response.token，' key': response.key，' param': obj.param}) }，(错误)={ console.log(`获取图片上传凭证错误：$ { error } `)提交(' uploadImgError ')})}，4 .后端生成上传令牌，并发给前端，我用计算机编程语言实现。

filetype=data.get('filetype')#构建鉴权对象q=Aut(configs . get(' qiniu ').get('AK ')，configs.get('qiniu ').获取(' SK ')#生成图片名盐=' '。加入(随机。样本(字符串。ascii _字母字符串。数字，8))键=salt ' _ ' str(int(time。time()))' . '文件类型#生成上传令牌，可以指定过期时间等令牌=q . upload _ token(配置。get(' qiniu ').get('bucket_name ')，key，3600)返回响应({'stateCode': 200，' token': token，' key': key}，200)5 .前端接收令牌，开始向服务器上传图片

//vuex/state.jsimgName: []，//图片名数组//vuex/ventures。jsuploadimg(state，msg){ const config={ usecdndomain : true，region : qiniu。地区。z2 } var putExtra={ fname : msg。帕拉姆。文件。name，params: { }，mimeType: ['image/png '，' image/jpeg '，' image/gif ']}；var observer={ next(res){ }，err(err){ console。日志(` 0图片上传错误信息：${err.message}`) }，complete(res){ console.log(`图片上传成功：$ { RES . key } `)状态。imgname。push(RES . key)} } var天文台=qiniu。上传(消息。帕拉姆。file，msg.key，msg.token，putExtra，config) //上传开始var订阅=可观察。订阅(观察者)}，6 .上传成功以后，将图片名存入数据库

//用到上传。某视频剪辑软件的界面这个。imgslist=这个。imgname。map(key=` http://$ { this。qiniuaddr }/$ { key } `)开关(这。imgslist。长度){ case 4: this。img 4=这个。imgslist[3]案例：这。img 3=这个。imgslist[2]案例2:这。img 2=这个。imgslist[1]案例1:这。img 1=这个。imgslist .将信息发送给后端this.actionPublish(obj)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。