ElementUI组件-upload上传组件使用

部分代码el-table中使用el-upload组件

<el-table
        :data="tableData"
        border
        style="width: 100%">

<el-table-column label="转盘图片">
          <template scope="scope">
            <el-upload
              class="avatar-uploader"
              :headers="{ 'Authorization': 'Bearer ' + getToken() }"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="(response, file) =>
                 handleAvatarSuccess(
                   response,
                   file,
                   scope
                 )"
              :before-upload="beforeAvatarUpload">
                <img v-if="scope.row.image" :src="scope.row.image" class="avatar">
                <i v-else class="el-icon-upload avatar-uploader-icon"></i>
            </el-upload>
          </template>
        </el-table-column>

</el-table>

这里的函数是一个箭头函数 (response, file) => handleAvatarSuccess(response, file, scope)，它接收两个参数response和file，然后调用handleAvatarSuccess函数，并将这两个参数连同scope一起传递给handleAvatarSuccess函数。

用于上传后回显图片

handleAvatarSuccess(res, file ,scope) {
      scope.row.image = res.url;
}

---

官方用例

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

handleAvatarSuccess(res, file) {
    this.imageUrl = URL.createObjectURL(file.raw);
}