element+七牛云上传+压缩图片

时间：2023-03-31 20:59:46 vue.js

本文上传的图片经过压缩后采用为https://www.jb51.net/article/156091.htm首先我们来分析一下实现多图上传的过程：前面-end向back端请求用于上传图片到服务器的token。后台为每张要上传的图片生成图片名称，并使用图片名称生成token。后端返回图片名称（前缀（域名））和token给前端。前端拿到token以后，将图片上传到七牛云。上传成功后，七牛云会返回图片的后缀参数。前端会将图片的前缀和后缀拼接成一个完整的url发送给后端。后台会将图片名称存入数据库

最多十次上传

data(){return{imgQuality:0.8,//图片压缩质量fileList:[],//存入已存图片}}methods:{upqiniu(file){//用于自定义上传//这里我们先向后台发送请求，获取需要的tokenconsole.log(file);this.$axios.post("xxxx").then((response)=>{console.log(response);if(response.data.code===10000){//请求成功获取的tokenthis.handleSuccessa(response.data,file.file,file);}else{this.$message({message:`${response.data.message}`,type:'warning'});}})},handleSuccessa（响应，文件，文件列表）{console.log（响应）；控制台日志（文件）；//在这里上传七牛云//console.log(fileList);那个=这个；var令牌=响应。结果对象.token；varkey=file.name.split('.')[0]+newDate().getTime();控制台日志（密钥）；varputExtra={fname:"",params:{},mimeType:[]||无效的};控制台日志（putExtra）；varconfig={useCdnDomain:true,disableStatisticsReport:false,retryCount:6,region:qiniu.region.z2};控制台日志（配置）；控制台日志（七牛）；//varobservable=qiniu.upload(file.raw,key,token,putExtra,config);varobservable=qiniu.upload(file,key,token,putExtra,config);变种观察者={};observer={next(res){console.log(res);//fileList.onProgress(res.total.percent);//这里是做上传图片的上传度fileList.onProgress(res.to塔尔）；if(res.total.percent==100){//alert("图片上传成功")that.$notify({title:'Success',message:'图片上传成功',type:'success'});};},error(err){},complete(res){//我们的前缀是固定的，所以我这样写.fileList.push({url:`http://xxxxx/${res.key}`,uid:文件.uid,名称:文件.name});控制台日志（资源）；}};//上传到七牛云varsubscription=observable.subscribe(observer)},}这里是压缩处理之前AvatarUpload(param){console.log(param);常量imgSize=param.size/1024/1024;控制台日志（imgSize）；//这里要做图片压缩如果大于1M，我们就进行比例压缩if(imgSize>1){const_this=thisreturnnewPromise(resolve=>{constreader=newFileReader()constimage=newImage()image.onload=(imageEvent)=>{constcanvas=document.createElement('canvas');constcontext=canvas.getContext('2d');constwidth=image.width*_this.imgQualityconstheight=image.height*_this.imgQualitycanvas.width=width;canvas.height=height;context.clearRect(0,0,width,height);context.drawImage(image,0,0,width,height);constdataUrl=canvas.toDataURL(param.type);constblobData=_this.dataURItoBlob(dataUrl,param.type);控制台日志（blobData）；resolve(blobData)}reader.onload=(e=>{image.src=e.target.result;});reader.readAsDataURL(参数);})}},dataURItoBlob(dataURI,类型){console.log(dataURI,类型);varbinary=atob(dataURI.split(',')[1]);变量数组=[];for(vari=0;i{picUrls.push(item.url)});//图片采集console.log(picUrls);this.$axios.post("xxxxx",{picUrls:picUrls.join(),//图片dealPattern:this.dealPattern,}).然后（（响应）=>{如果（response.data.code==10000）{console.log（响应）;this.$message（{message:'success',type:'success'}）;}else{this.$message({消息：`${response.data.message}`,type:'warning'});}})},

上一篇：快速开发后台管理系统vue-bag-admin

下一篇：别再这样学vue了，这样学，开挂一样牛

element+七牛云上传+压缩图片相关文章