如何从Vue中的ElementUI“el-upload”获取文件名？答案

【问题标题】：How to get file name from ElementUI "el-upload" in Vue?如何从Vue中的ElementUI“el-upload”获取文件名？
【发布时间】：2020-06-18 20:08:03
【问题描述】：

我想获取上传的文件名，以便在 :action URL 中使用它来进行 POST 请求。我假设这需要在 :before-upload 期间发生，或者可以在没有该方法的情况下检索它吗？

文档参考：https://element.eleme.io/#/en-US/component/upload#upload

<el-upload
  class="upload-demo"
  drag
  :action="url+filename+query"
  :on-error="handleUploadError"
  :on-success="handleUploadSuccess"
  :auto-upload="false"
  :before-upload="handleUploadbefore"
  :file-list="fileList"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
  <div class="el-upload__tip" slot="tip">Only files with a size less than 3MB.</div>
</el-upload>

文件上传的目标URL基本上是url+filename+query。

import { baseURL } from "@/utils/constants";

export default {
  name: "upload",
  data() {
    return {
      url: `${baseURL}/files/`,
      filename: null,
      query: `?override=true&auth=`
    }
  },
  methods: {
    handleUploadBefore() {

      return true;
    },    
    handleUploadError() {
      console.log("File upload failed.");
    },
    handleUploadSuccess() {
      console.log("File upload succeeded!");
    },
  }
};

【问题讨论】：

标签： vue.js vuejs2 element-ui

【解决方案1】：

before-upload 的函数签名是function(file) {}，其中file 是一个File 对象，它提供了一个name 属性。

解决方案是更新您的回调以接收file 参数：

handleUploadBefore(file) {
  console.log(file.name)
}

demo

【讨论】：

【解决方案2】：

您可以通过$refs 使用before-upload 访问它

this.$refs.upload.uploadFiles[0].name

demo

【讨论】：