vue中如何更改el-upload中的文件名name跟type , 改变后缀为webp让图片更小

iFfy_01

已于 2023-06-26 13:54:16 修改

阅读量1.9k

点赞数 1

文章标签： vue.js elementui javascript

于 2023-03-21 10:53:43 首次发布

本文链接：https://blog.csdn.net/weixin_59769148/article/details/129683248

版权

文章详细描述了一个Vue组件中处理图片上传的过程，包括手动上传的设置、限制上传图片的格式为jpg/jpeg/png，以及在on-change事件中检查和转换图片为Webp格式以减小文件大小。同时，文章提到了使用FileReader和canvas进行图片处理的方法。

摘要由CSDN通过智能技术生成

<el-form-item label="标题图片:" prop="img">
    <el-upload ref="upload" action="" 
        :show-file-list="true" 
        :file-list="mainImg" 
        list-type="picture-card"
        :auto-upload="false" :limit="3" multiple     
        accept="image/jpg,image/jpeg,image/png"                                         
        :on-change="handleUpload"                                                       
        :on-remove="handleRemove"                                                       
        :on-exceed="handleMcount" />                                                   </el-form-item>

先看看代码 . 我这设置的是手动上传

注意 : 如果是手动上传的话 , before-upload就不会生效 , 我们需要把限制图片格式跟大小的放在 on-change中

handleUpload (file, fileList) {
      const suffix = file.raw.type === 'image/jpg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpeg'
      //限制文件上传类型
      if (!suffix) {
        this.$message.error("上传图片只能是 png,jpg,jpeg 格式!");
        return false
      }
      // 更改name
      this.mainImgList = fileList.map((item) => {
        const timeStamp = new Date() - 0
        // 更改图片中的name属性
        let f = new File([item.raw], `${timeStamp}_${item.raw.name}.webp`);
        f.uid = item.raw.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
        return item.raw = f;
      })
      this.mainImg = fileList
    },

这里只做了图片大小的限制

因为我支持多张图片一起上传 , 所以这里使用了map

// 这里是上传图片按钮
this.mainImgList.map(async (item) => {
          console.log(item)
          // getWebpFileByImageFile 这个方法就是改变type
          const arr = await this.getWebpFileByImageFile(item)
          console.log(arr)
          const formMimg = new FormData()
          formMimg.append('fileArray', arr)
          // 调用上传图片的接口
          const mainImg = await uploadFile(formMimg)
        })

这是item

看看更改之后的 , 很明显size也减小了不少

这个是改变图片中的type值

async getWebpFileByImageFile (imageFile) {
      const that = this
      return new Promise((resolve, reject) => {
        const imageFileReader = new FileReader();
        imageFileReader.onload = function (e) {
          const image = new Image();
          image.src = e.target.result;
          image.onload = function () {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            resolve(
              that.base64ToFile(canvas.toDataURL("image/webp"), imageFile.name)
            )
          }
        }
        imageFileReader.readAsDataURL(imageFile)
      });
    },
base64ToFile (base64, fileName) {
      let arr = base64.split(','),
        type = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], fileName, {
        type
      });

    },