【无标题】

el-table自定义上传图片

HTML代码：

<el-table border :data="tableData" style="width: 100%" :key="certinfoKey">
            <el-table-column prop="assetAddressName" label="存放地址"> </el-table-column>
            <el-table-column prop="assetCategory" label="资产类型" v-if="isDetail"></el-table-column>
            <el-table-column prop="assetName" label="资产名称"></el-table-column>
            <el-table-column label="数量" v-if="!isDetail">
              <template slot-scope="">
                <span>1</span>
              </template>
            </el-table-column>
            <el-table-column prop="imageUrl" label="附件">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 100px"
                  v-if="scope.row.imageUrl"
                  ref="myImg"
                  :src="scope.row.imageUrl"
                  :preview-src-list="srcList"
                  @click="handlePriveImg(scope.row)"></el-image>
                  <el-upload v-else action=""
                    class="pad"
                    accept="image/png,image/jpg"
                    :http-request="(file)=>{return onUploadSuccessImggrey(file,scope.row)}"
                    ref="img-Imggrey" :limit="1">
                    <el-button size="small" type="primary" icon="el-icon-upload2" class="btn">上传</el-button>
                  </el-upload>
              </template>
            </el-table-column>
            <el-table-column prop="assetNo" label="资产编号" v-if="isDetail"></el-table-column>
            <el-table-column label="操作" width="120" v-if="!isDetail">
              <template slot-scope="{scope, $index}">
                <i class="el-icon-delete red" @click="handleDelete(scope, $index)"></i>
              </template>
            </el-table-column>
          </el-table>

js代码：

    // 覆盖默认的上传行为，自定义图片上传请求
    async onUploadSuccessImggrey(params, row) {
      console.log(params)
      console.log(row)
      //* 1. 图片处理
      const { file } = params
      const fileType = file.type // 获取文件类型
      const isImage = fileType.indexOf('image') != -1 // 判断是否是图片类型
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        // 判断大小
        this.$message.error('上传图片的大小不能超过 10MB!')
        return false
      }
      if (!isImage) {
        // 文件格式
        this.$message.error('请选择图片文件！')
        return false
      }
      //* 2. 图片上传
      const fromData = new FormData()
      fromData.append('file', file)
      const { code, data, msg } = await uploadImage(fromData)
      if (code !== 0) {
        return this.$message.error(msg || '上传失败')
      }
      this.$message.success('上传成功')
      // 1. 拼接得到一个图片信息对象
      const pic = data
      console.log(row)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].assetStorageId == row.assetStorageId) {
          this.tableData[i] = {
            ...this.tableData[i],
            imageUrl: pic
          }
          this.certinfoKey = !this.certinfoKey  // 用于更新表格视图
        }
      }
    },

希望对你有用，谢谢！