vue中实现图片压缩 file文件的方法

项目中遇到上传图片需要在前端进行图片压缩，将我的实现思路记录一下。（我已经拿到上传的file文件的前提下）

先创建一个公用的js，这里我的是api.js，里面封装一些常用的方法

图片压缩的方法为异步执行 使用async await 解决异步问题（需要等压缩完成后）

  //上传前压缩图片
   async beforeRead(file){//async await 解决异步问题，
    var formData = new FormData();//创建新的form
    if(file.length){   //file.length为真的时候说明是多图上传  要循环多图将file对象放进form中
     for(let i=0;i<file.length;i++){
      var f = await this.$api.compressImg(file[i]) //await只能放在async函数里 await会等待异步方法的返回值拿到以后在执行后面的方法
     formData.set('file'+i,f)
     }
    }else{
     let f = await this.$api.compressImg(file)
     formData.set('file0',f)
    }
   }

然后将formData传给后台，生成图片的线上地址就OK了！

总结

到此这篇关于vue中实现图片压缩 file文件的方法的文章就介绍到这了,更多相关vue图片压缩内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！