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

  • 8
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学不会•

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值