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

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

      
        
          
上传血液报告图片
          
              
                点击上传
              
              只能上传jpg/png文件，且不超过10M，最多可以上传3张图片
          
          
            

              

                
                
              
            
          
        
        
          取 消
          确 定
        
      


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= [] //圖片路徑
    }