前端压缩图片问题vue+vant+cavans

原创

已于 2022-11-29 13:47:14 修改 · 843 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-11-29 11:35:12 首次发布

上一篇写到压缩图片的相关代码，后面开发中还有一些bug

例如无法同时上传多张图片，这里需要遍历压缩，还有压缩png图片背景黑色的问题解决我调整了部分代码

  <van-uploader :max-count="9"  :after-read="afterReadImg"   @delete="onDelete"
      v-model="fileList" @click-upload="setBannerMax"  multiple>
      <div class="upload flex flex-col" v-if="fileList.length < 9">
        <img class="add-img" src="@/assets/images/add_img.png" />
        <span v-if="!fileList.length">拍照上传</span>
        <span v-else>{
  
  { fileList.length }}/9</span>
      </div>
    </van-uploader>

因为异步获取图片问题我这边把before-read方法去掉了，调取压缩放在了after-read方法里面

   // 上传图片
   async  afterReadImg(file) {
      let num = ''; 
      for (let i = 0; i < 13; i++) { num += Math.floor(Math.random() * 10); }
      //上传一张图片或拍照 
      if(!file.length){
          file.status = 'uploading'
          file.message = '上传中...'
          this.b