vue element 多张图片上传，删除和展示图片

 功能点：点击‘发送’按钮，打开弹窗，点击‘点击上传’按钮，上传图片并展示出图片，点击删除按钮，删除点击的图片

<!-- 弹窗 -->
      <el-dialog title="上传图片" :visible.sync="dialog.one"  width="720px">
        <el-form label-width="80px">
          <h3 style="font-size: 15px; margin-bottom: 15px; font-weight: 400">上传血液报告图片</h3>
          <el-form-item label="选择图片">
              <el-upload
                :headers="headers"
                class="avatar-uploader"
                action="/api/permission/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <font class="upload-text">只能上传jpg/png文件，且不超过10M，最多可以上传3张图片</font>
          </el-form-item>
          <el-form-item>
            <ul class="img-list">
              <li v-for="(item,index) in ossFileUploads" :key="index">
                <img :src="item.filePath">
                <i class="iconfont icon-shanchu" @click="handlerDel(item, index)"></i>
              </li>
            </ul>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handlerClose">取 消</el-button>
          <el-button type="primary" @click="handlerSend">确 定</el-button>
        </span>
      </el-dialog>


data() {
    return {
         headers: {
            Authorization: "Bearer " + localStorage.getItem("Authorization"),
          },
        tableItem: null,
        ossFileUploads: [],  //图片
        dialog: {
            one: false,
          },   
    }

// 方法
    // 上传图片验证
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        // 判断图片超过3张禁止再次上传
        if (this.ossFileUploads.length === 3) {
          this.$message.error('不能超过3张!');
          return false
        }
        // 判断图片大小
         if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
        },
    // 上传血液报告图片回调
      handleAvatarSuccess(res, file) {
        // 状态 不等于200 停止往下执行
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return false;
        }
        // 图片上传成功，添加到图片数组中，进行渲染
        this.ossFileUploads.push({
          filePath: res.data,
          type: "blood",
          dataId: this.tableItem.id
        })
      },
    // 删除图片
    handlerDel(item,index){
      // 图片大于1才能删除
      if(this.ossFileUploads.length > 1){
          this.ossFileUploads.splice(index,1)
          this.$message.success('删除成功')
      }else{
        this.$message.error('保留最后一张')
      }
    },
    // 查看
    async  getSendReportPop(row){
      // 发送图片需要用到列表那一项数据
      this.tableItem = row
      // 打开弹窗
      this.dialog.one = true
      // 列表ID不存在清空图片数组，防止图片数据重复显示
      if(!row.id){
        this.ossFileUploads=[]
      }else {
        // 列表ID存在，请求接口，拿到图片数据，进行渲染
         const res = await getScreeningFileLists(row.id, "blood")
         if(res.code === 200){
           this.ossFileUploads = res.data
         }
      }
    },

     // 发送图片
    async handlerSend(){
      // 发送图片，如果图片空，不往下执行
      if(this.ossFileUploads.length === 0){
          this.$message.error('至少上传一张')
          return false
      }
      const params = {
          bloodId : this.tableItem.id,
          id : this.tableItem.id,
          bookingId : this.tableItem.bookingId,
          screenOrgId : this.tableItem.screenOrgId,
          personId: this.tableItem.personId,
          ossFileUploads: this.ossFileUploads,
      }
      // 发送图片接口
      const res = await  sendScreeningFiles(params);
      if(res.code === 200){
        this.$message.success('发送成功')
        // 图片上传成功，调取列表接口，刷新页面
        this.getTableList()
        // 关闭弹窗
        this.dialog.one = false
      }
    },
     //取消
    handlerClose(){
      this.dialog.one = false;
      this.ossFileUploads= [] //圖片路徑
    }