封装上传组件

<template>
  <el-upload action="#" :before-upload="beforeAvatarUpload" accept="image/*" :limit="limit" list-type="picture-card" :file-list="list" :http-request="http_uploadImage" ref="myupload" :multiple="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{ file }" style="height: 100%">
      <el-progress v-if="uploadPrecent > 0" :width="90" :height="90" text-color="#fff" type="circle" :percentage="uploadPrecent" :color="customColorMethod"></el-progress>
      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
      <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
          <i class="el-icon-download"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
    <el-dialog :visible.sync="dialog_flag" append-to-body title="预览图片">
      <img width="100%" :src="PreviewUrl" alt="" />
    </el-dialog>
  </el-upload>
</template>

<script>
import { UploadImage } from "@/api/publicInterface.js";
import { compressorImage } from "@/utils/imageCompression.js";//压缩图片
import { saveAs } from "file-saver";
var FileSaver = require("file-saver");
export default {
  name: "uploadScrapVoucher",
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      uploadPrecent: 0,
      progressFlag: false,
      status: null,
      disabled: false,
      dialog_flag: false,
      dialog_ImageUrl: process.env.VUE_APP_UPLOAD_PIC,
      PreviewUrl: "",
      list: []
    };
  },


  methods: {
    //判断图片大小和格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1.24;
      if (!isJPG) {
        this.$message.error("上传图片只能是 jpeg jpg png格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      if (!file) return;
    },

    async http_uploadImage(e) {
      try {
        const file = e.file;
        const formData = new FormData();
        // 压缩图片
        const afterCompression_file = await compressorImage(file, "file", 0.7);
        formData.append("image", afterCompression_file);
        const {
          status,
          msg,
          data: { url }
        } = await UploadImage(formData, this.onProcess);
        this.$emit("photo_url", url);
        status === 200 ? this.$message.success(msg) : this.$message.error(msg);
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.uploadPrecent = 0;
        this.status = status;
      }
    },

    //预览
    handlePreview(file) {
      this.dialog_flag = true;
      this.PreviewUrl = file.url;
      console.log("Preview", file.url);
    },

    // 下载
    handleDownload(file) {
      const fileurlArr = file.url.split("/");
      const fileurlName = fileurlArr[fileurlArr.length - 1];
      const fileName = file.name || fileurlName;
      FileSaver.saveAs(file.url, fileName);
    },

    // 删除
    handleRemove(file) {
      this.$refs.myupload.clearFiles();
      this.$emit("remove", file);
    },

    // 进度条
    onProcess(e) {
      const { loaded, total } = e;
      const uploadPrecent = ((loaded / total) * 100) | 0;
      this.uploadPrecent = uploadPrecent;
    },

    // 进度条颜色
    customColorMethod(uploadPrecent) {
      if (uploadPrecent < 30) {
        return "#909399";
      } else if (uploadPrecent < 70) {
        return "#e6a23c";
      } else if (uploadPrecent === 100) {
        return "#67c23a";
      } else {
        return "#409eff";
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 110px;
  height: 110px;
  cursor: pointer;
  line-height: 110px;
  vertical-align: top;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 110px;
  height: 110px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
::v-deep .el-button {
  color: #606266 !important;
  border: 1px solid #dcdfe6 !important;
}

::v-deep .el-upload-list--picture-card .el-progress {
  width: 100%;
  margin-left: 8px;
}
// 解决上传图片以及回显图片时跳动问题
::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>