Element UI table里上传图片后如何显示在表格里

Question

问题描述

写了一个后台管理系统，需求是通过新增按钮，弹出一个dialog来上传 图片，详情（文章），视频。
不太明白这整个逻辑怎么实现。

问题出现的环境背景及自己尝试过哪些方法

现在的问题就是我在dialog里上传的图片赋值给了上传图片的小dialog，之后怎么在提交过程中传给table里我定义的imgPath。

相关代码

这一部分是table的

<el-table-column  label="图片" width="200" align="center">
  <!--插入图片链接的代码-->
  <template slot-scope="scope">
    <img :src="scope.row.imgPath" alt style="width: 100px;height:50px">
  </template>
</el-table-column>

这一部分是dialog的，取自element官网上的upload

<el-form-item label="图片">
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible" size="tiny">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</el-form-item>

methods函数里

 // 新增
    handleAdd(row) {
      this.form = {
        imgPath: null,
        detailURL: "",
        videoURL: "",
        status: 0
      };
      this.addVisible = true;
      this.$nextTick(() => { // DOM 异步更新
        this.$refs['form'].clearValidate(); // 移除校验效果
      })
    },
    
 // 图片上传
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

希望能给个实例，或者能帮我讲讲这中间逻辑，有点懵了

Answer 1

看了你这个，我暂时当作你是前端保存数据，不经过后台，首先，你上传图片，在你的handlePictureCardPreview方法里拿到你的图片连接赋值于imgPath上，然后关闭弹框时，dialog上有个close事件，在他的方法里通过this.$emit('父组件上绑定的事件名'，你的form值)传递回父组件，其次，在父组件，你的父组件上绑定的事件的方法里，例如CB_ Dialog(val)，val就是你传递回来的数据，在方法里把数据，添加到你的数组里，如果是编辑，在你打开弹框的时候，需要把index同时传递过去，回传时候，把index传回来。注意：$emit()第一个元素必须是事件名，后面可以跟随多个参数，具体多少个你自己设置

Answer 2

1. 点击新增时记录当前准备上传图片所属行row(json)
2. 上传成功后,修改指定行图片 row.imgPath = realPath;

如果上传dialog未做成组件， 那么就直接记录修改
如果是组件那就需要自定义事件和$emit了

Answer 3

如下配置， data数据和config配置保持一致， config里里lable是表头名称，prop是参数名称，利用自定义字段format来区分是普通字段还是特殊字段

 data : [
  {
    nameStr: "名称",
    url:
      "http://img2.imgtn.bdimg.com/it/u=1718395925,3485808025&fm=26&gp=0.jpg",
    customType: "普通"
  },
  {
    nameStr: "名称",
    url:
      "http://img2.imgtn.bdimg.com/it/u=1718395925,3485808025&fm=26&gp=0.jpg",
    customType: "普通"
  }
]

     config: [
        {
          label: "商品名称",       
          prop: "nameStr"       
        },
        {
          label: "商品封面",     
          prop: "url",
          format: "icon"
        },
        {
          label: "商品类型",       
          prop: "customType"
        }
       
      ]

 <el-table :data="data">
      <el-table-column
        v-for="(item, index) in config"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <span v-if="item.format === 'icon'">
            <img :src="scope.row[item.prop]">
          </span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
    </el-table>