element-ui Upload图片上传

图片上传是以base64传，再以后端返回base64反显

1、封装图片上传，可直接引用

<template>
  <div>
    <!-- :http-request="getFile" -->
    <el-upload
      list-type="picture-card"
      action=""
      accept=".png,.jpg,.jpeg"
      :multiple="multiple"
      :auto-upload="false"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-exceed="handleExceed"
      :on-remove="handleUploadRemove"
      :on-change="getFile"
      :limit="limit"
      :class="{'picHidden':isHidden}"
      :disabled="isDisabled"
      class="upPic"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog
      title="预览"
      center
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :lock-scroll="false"
      :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import { notify } from '@/utils';
export default {
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    jumpEdit: {
      type: String,
      default: ''
    },
    picContentNew: {
      type: Array,
      default: () => []
    },
    isOne: {
      type: Boolean,
      default: null
    },
    limit: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      fileList: [],
      proofImage: [],
      dialogImageUrl: '',
      dialogVisible: false,
      newArr: [],
      isHidden: false,
      isDone: false,
      files: {}
    };
  },
  computed: {
    // 是否禁用
    isDisabled() {
      return this.jumpEdit === 'Detail' || this.jumpEdit === 'flowDetail';
    }

  },
  watch: {

    fileList: {
      handler(val) {
        if (this.isOne && val.length > 0) {
          this.isHidden = true;
        } else {
          this.isHidden = false;
        }
      },
      deep: true
    },

    picContentNew: {
      handler(list) {
        // jumpEdit='toEdit'为弹窗打开，flowDetail为流程内查看避免在created中取不到值
        if ((this.jumpEdit === 'toEdit' || this.jumpEdit === 'flowDetail') && !this.isDone) {
          if (list && list.length > 0) {
            list.forEach(item => {
              this.fileList.push({
                name: item.name,
                percentage: parseFloat(item.percentage),
                proofImage: item.proofImage,
                raw: item.raw,
                size: parseFloat(item.size),
                status: item.status,
                uid: parseFloat(item.uid),
                url: item.proofImage
              });
            });
          }
          this.isDone = true;
        }
      },
      deep: true
    }
  },

  created() {
    // jumpEdit='Detail'时不允许进行删除操作
    if (this.jumpEdit === 'EDIT' || this.jumpEdit === 'Detail') {
      if (this.picContentNew && this.picContentNew.length > 0) {
        this.picContentNew.forEach(item => {
          this.fileList.push({
            name: item.name,
            percentage: parseFloat(item.percentage),
            proofImage: item.proofImage,
            raw: item.raw,
            size: parseFloat(item.size),
            status: item.status,
            uid: parseFloat(item.uid),
            url: item.proofImage
          });
        });
      }
    }
  },

  methods: {

    getFile(file, picList) {
      console.log(file, '====', picList, '===fileList', this.fileList);

      if (picList && picList.length > 0) {
        let sum = 0;
        picList.forEach((el) => {
          sum += el.size / 1024 / 1024;

          return sum;
        }, 0);

        if (sum >= 20) {
          picList = picList.pop();
          return notify('图片已超过20M！');
        } else {
          const types = ['image/jpeg', 'image/jpg', 'image/png']; // 图片格式
          const isLt10M = file.size / 1024 / 1024 < 10; // 图片大小
          const isImage = types.includes(file.raw.type);

          if (!isImage) {
            this.fileList = picList.slice(0, -1); // 不符合格式的删除
            this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
            return false;
          }

          if (!isLt10M) {
            this.fileList = picList.slice(0, -1); // 不符合格式的删除
            this.$message({
              message: '上传文件大小不能超过 10MB!',
              type: 'error'
            });
            return false;
          }

          this.newArr = [];
          this.fileList = [];

          if (Array.isArray(picList)) {
            picList.forEach(item => {
              // 已有base64
              if (item.proofImage) {
                this.newArr.push({
                  name: item.name,
                  percentage: item.percentage,
                  raw: item.raw,
                  size: item.size,
                  status: item.status,
                  uid: item.uid,
                  url: item.url,
                  proofImage: item.proofImage
                });

                const map = new Map();
                for (const el of this.newArr) {
                  map.set(el.uid, el);
                }
                this.fileList = [...map.values()];
              } else {
                this.getBase64(item.raw).then(res => {
                  const params = res.split(',');
                  if (params.length > 0) {
                    this.proofImage = params[1];

                    this.newArr.push({
                      name: item.name,
                      percentage: item.percentage,
                      raw: item.raw,
                      size: item.size,
                      status: item.status,
                      uid: item.uid,
                      url: item.url,
                      proofImage: this.proofImage
                    });

                    const map = new Map();
                    for (const it of this.newArr) {
                      map.set(it.uid, it);
                    }
                    this.fileList = [...map.values()];
                    this.$emit('uploadImg', this.fileList);
                  }
                });
              }
            });
          }
        }
      }
    },
    // 获取图片转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = '';
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },

    handleExceed(files, fileList) {
      this.$message.warning(`最多可以上传 ${this.limit} 个文件`);
    },

    handleUploadRemove(file, picList) {
      this.fileList = picList;
      this.proofImage = '';
      this.$emit('uploadImg', this.fileList);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }

  }
};
</script>

<style scoped lang="scss">
.upPic{
  // height: 148px;
}
::v-deep .picHidden {
  .el-upload {
    visibility: hidden;
  }
}
</style>

2、引用组件

<LkuploadImg :picContentNew="ggrPicNew" :jumpEdit="jumpEdit" @uploadImg="uploadImg1"></LkuploadImg>

data() {
	ggrPicNew: [],
},

methods: {
	uploadImg1(v) {
      this.form.fmxxPic = v;
    },
}

这是uploadImg1事件产生的信息

3、调用详情后给ggrPicNew赋值

this.ggrPicNew = this.form.fmxxPic;