vue多文件上传，图片需要压缩后转base64

效果图

主要通过picCompress .js这个文件进行压缩转base64

html

    
      
      
上传附件 支持文件拖拽到此处上传
    

js

记得先引入这个文件，主要通过这个文件进行压缩转base64
import { picCompress } from "../../../utils/picCompress .js";

  
// 图片上传压缩
    async beforeUpload(file) {
      const type = file.type;
      const isIMG =
        type === "image/jpg" ||
        type === "image/jpeg" ||
        type === "image/png" ||
        type === "image/svg" ||
        type === "image/bmp" ||
        type === "image/gif" ||
        type === "image/tiff";
      if (isIMG) {
        // 把上传的文件压缩成base64编码格式
        picCompress.methods.compressImg(file).then((res) => {
           //res就是压缩后转成base64后的数据
          // 由字节转换为 KB
          let fileLength = parseInt(res.length - (res.length / 8) * 2);
          let size = "";
          size = parseInt((fileLength / 1024).toFixed(2));
          console.log("压缩后：" + size + "KB");
          if (size > 5120) {
            this.$message.info("上传图纸压缩后大小不得大于5MB！");
            return false;
          } else {
            console.log(file);
            let files = {};
            files.name = file.name;
            files.path = res;
            files.size = file.size;
            files.suffix = file.type.substring(file.type.lastIndexOf("/") + 1);
            files.type = this.fileInfo.fileType;
            this.$emit("fileData", files);
          }
        });
      } else {
        // 其他文件正常上传
        let formData = new FormData();
        formData.append("file", file);
        formData.append("type", this.fileInfo.fileType);
        let api = this.service;
        api.defaults.headers.common["Content-Type"] = "multipart/form-data";
        let res = await api.post("/file/upload/multipart", formData);
        if (res.status == 0) {
          let files = {};
          files.name = res.data.name;
          files.path = res.data.path;
          files.size = res.data.size;
          files.suffix = res.data.suffix;
          files.type = this.fileInfo.fileType;
          this.$emit("fileData", files);
        }
      }
    },

通过picCompress .js这个文件进行压缩转base64  用的是canvas压缩后再转base64

export const picCompress = {
    methods: {
        // 压缩图片
        compressImg(file) {
            var src;
            var files;
            var fileSize = parseFloat(parseInt(file['size']) / 1024);
            console.log('压缩前KB :' + fileSize)
            var read = new FileReader();
            read.readAsDataURL(file);
            return new Promise(function(resolve, reject) {
                read.onload = function(e) {
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function() {
                        //默认按比例压缩
                        var w = this.width,
                            h = this.height;
                        //生成canvas
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        var base64;
                        // 创建属性节点
                        canvas.setAttribute("width", w);
                        canvas.setAttribute("height", h);
                        ctx.drawImage(this, 0, 0, w, h);
                        if (fileSize < 1) {
                            //如果图片小于一兆 那么不执行压缩操作
                            base64 = canvas.toDataURL(file['type'], 1);
                        } else if (fileSize > 1 && fileSize < 2) {
                            //如果图片大于1M并且小于2M 那么压缩0.5
                            base64 = canvas.toDataURL(file['type'], 0.5);
                        } else {
                            //如果图片超过2m 那么压缩0.2
                            base64 = canvas.toDataURL(file['type'], 0.2);
                        }
                        // 回调函数返回file的值（将base64编码转成file）如果后台接收类型为base64的话这一步可以省略

                        resolve(base64)
                    };
                };
            })
        },
        //base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）
        dataURLtoFile(dataurl) {
            var arr = dataurl.split(','),
                mime = 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], {
                type: mime
            });

        }
    }
};