安装

npm i image-conversion --save

引用

• main.js全局引用

import * as imageConversion from 'image-conversion'
Vue.prototype.$imageConversion = imageConversion

• 单文件单独引用
  import * as imageConversion from 'image-conversion'

页面使用

productList: [
        {
          ProductID: 1,
          ProductName: "上衣",
          ProductNameEN: "Jacket",
          ImgPathList: [],
        },
        {
          ProductID: 2,
          ProductName: "西裤",
          ProductNameEN: "Pants",
          ImgPathList: [],
        },
        {
          ProductID: 4,
          ProductName: "衬衫",
          ProductNameEN: "Shirt",
          ImgPathList: [],
        },
        {
          ProductID: 5,
          ProductName: "马甲",
          ProductNameEN: "Vest",
          ImgPathList: [],
        },
        {
          ProductID: 16,
          ProductName: "大衣",
          ProductNameEN: "Overcoat",
          ImgPathList: [],
        },
      ], //品类集合

<div
          class="uploadStyle"
          v-for="item in productList"
          :key="item.ProductID"
        >
          <p style="margin: 5px 0px; font-size: 14px">
            {{ salewaynumber == "en" ? item.ProductNameEN : item.ProductName }}
          </p>
          <!-- 上传图片 -->
          <el-upload
            drag
            ref="front"
            accept="image/*"
            :before-upload="beforeUpload"
            :class="{ hide: item.ImgPathList.length == limitCount }"
            :action="imgUploadUrl"
            :headers="headersData"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="
              (file, ImgPathList) => {
                handleRemove(file, item.ImgPathList, 0, item);
              }
            "
            :on-success="
              (res, file, ImgPathList) => {
                handleSuccess(res, file, item.ImgPathList, 0, item);
              }
            "
            :fileList="item.ImgPathList"
          >
            <i class="el-icon-plus"></i>

            <div
              @click="checkImg(file, item)"
              slot="file"
              slot-scope="{ file }"
              style="position: relative"
            >
              <img :src="file.url" width="146" height="146" alt="" />
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file, item.ImgPathList, 0, item)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
              <span :class="{ activeImg: file.IsDefault === 1 ? true : false }"
                ><i class="el-icon-check"></i
              ></span>
            </div>
          </el-upload>
          <el-dialog
            :visible.sync="dialogVisible1"
            width="850px"
            height="800px"
          >
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>

上传文件前调用

// 上传前 判断文件类型和大小
    beforeUpload(file) {
      // 使用后缀名判断 file.type 可能取不到
      return new Promise((resolve, reject) => {
        let fileTypeLength = file.name.split(".").length;
        if (fileTypeLength > 0) {
          let fileType = file.name.split(".")[fileTypeLength - 1].toLowerCase();
          const extension = fileType === "jpg";
          const extension2 = fileType === "png";
          const extension4 = fileType === "jpeg";
          const isSizeBig = file.size / 1024 / 1024 < 1; // 图片大小不超过1M
          if (!extension && !extension2 && !extension4) {
            this.$message.warning(
              this.salewaynumber == "en"
                ? "Pictures can only be in jpg,jpeg,png format"
                : "上传图片只能是 JPG、JPEG、PNG 格式!"
            );
            this.isUpload = false;
            reject(false);
          } else {
            // resolve(file)
            if (isSizeBig) {
              resolve(file);
            } else {
              this.$message.warning(`当前图片为${(file.size/1024/1024).toFixed(2)}M，将进行压缩`)
              imageConversion.compressAccurately(file, 1024).then((res) => {
                this.$message.warning(`压缩完成大小约为${(res.size/1024/1024).toFixed(2)}M`)
                resolve(res);
              });
            }
          }
        }
      });
    },
handleRemove(file, fileList, value, item) {
      // 商标 
      if (value == 0) {
        // item.ImgPathList = [];
        let newArr = item.ImgPathList.filter((i) => {
          return i.uid != file.uid
        })

        file.del = true
        item.ImgPathList = newArr

        // 只有一个商标默认选中
        if (newArr.length === 1) {
          item.ImgPathList[0].IsDefault = 1
        }
        // this.fileList = fileList;
      } else if (value == 1) {
        // 面料标 
        let newArr = item.ImgPathList.filter((i) => {
          return i.uid != file.uid
        })

        file.del = true
        item.ImgPathList = newArr
      }
    },
    handleSuccess(res, file, fileList, value, item) {
      // 商标
      if (value == 0) {
        if (item.ProductID == -1) {
          this.productList.forEach((element) => {
            element.ImgPathList = [];
            {
              element.ImgPathList.push({
                ImgPath: file.response.FileName,
                name: file.name,
                status: file.status,
                uid: file.uid,
                IsDefault: 0,
                url: file.response.picIP + file.response.FileName,
              });
            }
          });
        } else {
          // item.ImgPathList = [];
          // this.fileList.length        

          item.ImgPathList.push({
            ImgPath: file.response.FileName,
            name: file.name,
            status: file.status,
            uid: file.uid,
            IsDefault: 0,
            url: file.response.picIP + file.response.FileName,
          });

          // 只有一个商标默认选中
          if (item.ImgPathList.length === 1) {
            item.ImgPathList[0].IsDefault = 1
          }
        }
        // 面料标 
      } else if (value == 1) {
        item.ImgPathList.push({
          ImgPath: file.response.FileName,
          name: file.name,
          status: file.status,
          uid: file.uid,
          IsDefault: 0,
          url: file.response.picIP + file.response.FileName,
        });
 
        // this.fileList2.push({
        //   ImgPath: file.response.FileName,
        //   name: file.name,
        //   status: file.status,
        //   uid: file.uid,
        //   url: file.response.picIP + file.response.FileName,
        // });
      }
      // this.fileList = []
    },