图片封装上传

photoUpload的组件

<!--
<template>
  <div>
    <!--   accept限制上传文件的类型 -->
    <el-upload :on-preview="handlePictureCardPreview" :on-exceed="handleExceed" :limit="limits" class="upload-demo" list-type="picture-card" :action="uploadFileURL(fileType,0)" :data="uploadFileData(data)" ref="upload" :headers="setHeader(headers)" :on-success="mySuccess" :on-remove="onRemove" :file-list="fileListArr" :before-upload="beforePhotoUpload">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
    
<script>
import {
  uploadFileURL,
  openFileApi,
  uploadFileData,
  setHeader,
} from "../api/file";
import { resetRouter } from "../plugins/router";
export default {
  name: "LjUpload",
  props: {
    data: {
      default() {
        return {};
      },
    },
    fileType: {
      type: String,
      default: "",
    },
    headers: {
      default() {
        return {};
      },
    },
    fileList: {},
    limits:{
      type: Number,
      default:3
    }
  },
  data() {
    return {
      flag: true,
      dialogImageUrl: "",
      dialogVisible: false,
      fileListArr: [], //用来存放图片
      fileListString: [], //存图片id数组
      uploadFileURL: uploadFileURL,
      uploadFileData: uploadFileData,
      setHeader: setHeader,
    };
  },
  mounted() { 
    this.flag = true

  },
  watch: {
    fileList: {
      handler(newValue, oldValue) {
        if(!this.flag){
          return
        }
        let copynewValue = newValue; //拷贝一份
        console.log("copynewValue", copynewValue); //字符串id   // 800fb314bd7b40deb9b37be1e14420c2,8fdf9a967051495c963e24e02a7614fb
        this.fileListString = copynewValue.split(","); //转化为数组
        copynewValue.split(",").forEach((item) => {
          this.fileListArr.push({ url: openFileApi + item });
        });
        if(this.fileListArr.length){
          this.flag = false
        }
      },
    },
  },
  methods: {
    // 文件超出
    handleExceed(){
      this.$message.warning(`最多上传${this.limits}张图片!`)
    },
    mySuccess(res, file, fileList) {
      if (res.statusCode != "200") {
        this.$message({
          message: res.statusMsg,
          type: "error",
        });
        if (
          res.statusCode === "102" ||
          res.statusCode === "110" ||
          res.statusCode === "103" ||
          res.statusCode === "111"
        ) {
          this.$commonLogout();
        }
      } else {
        this.uploadSucess(res, file, fileList);
      }
    },
    //uploadSucess文件上传成功后走的函数
    uploadSucess(res, file, fileList) {

      this.flag = false //为了不让他触发watch
      this.fileListArr = fileList;
      // 获取图片id数组
      if (res.statusCode == 200) {
        this.fileListString.push(file.response.resMap.fileIdList[0]);
      }
      this.$emit("successHandlePhoto", this.fileListString);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //限制用户上传格式--上传类型错误会自己去调用remove
    beforePhotoUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" ||
        testmsg === "JPG" ||
        testmsg === "png" ||
        testmsg === "PNG" ||
        testmsg === "bpm" ||
        testmsg === "jpeg" ||
        testmsg === "BPM";
      if (!extension) {
        this.$message.error("上传图片只能是jpg / png / bpm格式!");
        return false;
      }
      return extension;
    },
    onRemove(file, fileList) {
    
      this.flag = false//为了不让他触发watch
      this.fileListArr.forEach((item, index) => {
        if (item.uid == file.uid) {
          this.fileListArr.splice(index, 1);
          this.fileListString.splice(index, 1);
        }
      });
      this.$emit("successHandlePhoto", this.fileListString);
    },
  },
};
</script>

<style scoped  lang="less">
.upload-input {
  display: none;
}
.upload-demo {
  align-items: center;
  /deep/.el-upload-list {
    display: inline-block !important;
  }
}
</style>

父组件用法:

<el-row>
                <el-col>
                  <el-form-item label="上传音频:">
                    <!-- 上传音频组件 :file-list="fileList"这个用作编辑回显用的-->
                    <audio-upload1 fileType="serviceAnnex" @successHandleAudio="successHandleAudio" :file-list="editForm.audioFileIds" />
                  </el-form-item>
                </el-col>
              </el-row>

  // 音频上传回调
    successHandleAudio(e) {
      this.editForm.audioFileIds = e.join(",");
    },