el-upload图片上传组件多张base64上传封装

公司要求图片上传转换base64位并转换为字符串，多张图片用逗号隔开，无奈只能自己二次封装element的上传组件

主要修改这几个方面
1.转换多张图片为base64，
2.去除el-upload动画，
3.支持传递最多可上传数量达到数量隐藏上传按钮

这是二次封装组件的子组件代码

pic为处理好后传递给父组件的base64代码
limit为接受父组件传递进来的图片最多上传张数，达到最多数量隐藏上传按钮，传递0或者不传递这个参数为无限制

<template>
  <div>
    <!-- 上传组件 -->
    <el-upload
      :class="{ hide: hideUploadEdit }"
      list-type="picture-card"
      action=""
      accept=".jpg, .png"
      :limit="limit"
      :auto-upload="false"
      :file-list="fileList"
      :on-change="getFile"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleUploadRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 预览弹窗 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
     
  props: {
     
    // 可上传图片数量
    limit: {
     
      type: Number,
      default: 0,
    },
  },
  data() {
     
    return {
     
      // 上传按钮显示开关
      hideUploadEdit: false,
      // 上传照片列表数据
      fileList: [],
      // 预览弹窗开关
      dialogVisible: false,
      // 预览图片url
      dialogImageUrl: "",
      // 转换base64后的数据
      picArray: [],
      // 转换为字符串后的base64数据
      pic: "",
    };
  },
  watch: {
     
    picArray() {
     
      // 达到限制数量隐藏上传按钮
      this.hideUploadEdit = this.picArray.length == this.limit;
      // picArray发生变化转换为字符串
      this.pic = this.picArray.toString();
      // 传递处理好的图片数据
      this.$emit("onPicChange", this.pic);
    },
  },
  methods: {
     
    // 获取文件信息
    getFile(file, fileList) {
     
      this.picArray = [];
      for (let item of fileList) {
     
        this.getBase64(item.raw).then((res) => {
     
          this.picArray.push(res);
        });
      }
    },
    // 获取图片转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);
        };
      });
    },
    // 删除
    handleUploadRemove(file, fileList) {
     
      this.getFile(file, fileList);
    },
    // 预览
    handlePictureCardPreview(file) {
     
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.hide .el-upload--picture-card {
     
  display: none;
}
.el-upload-list__item {
     
  transition: none;
}
</style>

下面为在父组件的用法

1.进行实例化引用子组件，之前普通引用总是报错

components: {
      upload: () => import("@/components/upload") },

2.@onPicChange为接受子组件传递过来的pic数据（处理好的base64字符串）
:limit为最多可上传的图片数量

<!-- 图片上传组件 -->
<upload @onPicChange="onPicChange" :limit="3"></upload>

3.接收图片上传数据，保存到哪里自己安排吧

// 接收图片上传数据
    onPicChange(pic) {
     
      console.log(pic);
    },