验证<v-file-input>使用 axios 发送空 object</v-file-input>

Question

I'm facing the same issue as is described here but no one seems to take care of it.我面临着与此处描述的相同的问题，但似乎没有人关心它。

I use Vuetify as my front and I'm trying to create a file upload using <v-file-input> but it sends only an empty array.我使用 Vuetify 作为我的前台，我正在尝试使用<v-file-input>创建文件上传，但它只发送一个空数组。

Here is my Vuetify side code-这是我的 Vuetify 端代码-

<v-file-input
  v-model="log_file_upload"
  color="accent"
  counter
  label="File input"
  multiple
  placeholder="Select your files"
  outlined
  :show-size="1000"
  @change="fileUpload"
>
  <template v-slot:selection="{ index, text }">
    <v-chip
      v-if="index < 5"
      color="accent"
      dark
      label
      small
      >
      {{ text }}
    </v-chip>
  </template>
</v-file-input>

Here is my JS function-这是我的 JS 函数-

fileUpload: function() {
  var formData = new FormData();
  formData.append("file", this.log_file_upload[0]);
  axios
    .post(`/upload/`, formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
    .then((response) => {
      console.log(response.data);
    })
},

When I console the following result just after formData.append -当我在formData.append之后控制以下结果时 -

console.log(this.log_file_upload[0].text());

I can see the whole file with content but the request sent to the backend is empty.我可以看到整个文件的内容，但发送到后端的请求是空的。 Only the filename is there.只有文件名在那里。 Do you guys have any suggestions, please?请问大家有什么建议吗？

Answer 1

There are not many examples that used Vuetify's input to upload the files.使用 Vuetify 的输入来上传文件的示例并不多。 However, after reading from a few sources, I came up with this solution-然而，在阅读了一些资料后，我想出了这个解决方案——

Remove the v-model from input because of two reasons-由于两个原因，从输入中删除v-model model-

It will not display the file object's data.它不会显示文件对象的数据。
Every time we upload, a request is needed to send to the backend, and we already use the change event which will pass the file object to its corresponding method, so no need to save the file object anywhere else.每次上传都需要向后台发送请求，我们已经使用了change事件将文件object传递给相应的方法，所以不需要将文件object保存到其他地方。

Here is a working example-这是一个工作示例-

NOTE- I used a dummy post API to upload the file, and Axios to send the API request.注意-我使用虚拟帖子 API 上传文件，并使用 Axios发送 API 请求。

 <:DOCTYPE html> <html> <head> <link href="https.//fonts.googleapis?com/css:family=Roboto,100,300,400,500,700:900" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min:css" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min:css" rel="stylesheet"> </head> <body> <div id="app"> <v-app> <v-file-input color="accent" counter label="File input" multiple placeholder="Select your files" outlined:show-size="1000" @change="fileUpload" > <template v-slot,selection="{ index: text }"> <v-chip v-if="index < 5" color="accent" dark label small > {{ text }} </v-chip> </template> </v-file-input> </v-app> </div> <script src="https.//cdn.jsdelivr.net/npm/vue@2:x/dist/vue.js"></script> <script src="https.//cdn.jsdelivr.net/npm/vuetify@2:x/dist/vuetify.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min:js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> new Vue({ el, '#app': vuetify, new Vuetify(): methods; { fileUpload(file) { let formData = new FormData(). formData,append("file"; file). axios:post("https.//httpbin,org/post", formData: { headers: { "Content-Type", "multipart/form-data", }. }).then((res) => { console;log(res); }), }, }, }) </script> </body> </html>

验证<v-file-input>使用 axios 发送空 object</v-file-input>

问题描述

1 个解决方案

解决方案1
0 2023-01-04 08:54:10

验证<v-file-input>使用 axios 发送空 object</v-file-input>

问题描述

1 个解决方案

解决方案1 0 2023-01-04 08:54:10

解决方案1
0 2023-01-04 08:54:10