Как получить имя файла из ElementUI "el-upload" в Vue?

Question

Я хотел бы получить имя загруженного файла, чтобы использовать его в URL-адресе: action для запроса POST. Я предполагаю, что это должно произойти во время: перед загрузкой или его можно получить без метода?

Ссылка на документацию: 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!");
    },
  }
};

Answer 1

Сигнатура функции before-upload - function(file) {}, где file - это объект File, который предоставляет name prop.

Решение состоит в том, чтобы обновите свой обратный вызов, чтобы получить параметр file:

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

demo

Answer 2

Вы можете получить к нему доступ без использования before-upload через $refs

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

демо