Vuetify< v-file-input>使用axios发送空对象

rxztt3cl 于 2023-01-05 发布在 iOS

关注(0)|答案(1)|浏览(206)

我面临的问题与此处描述的相同：https://github.com/api-platform/api-platform/issues/2135-但似乎没有人照顾。
我使用Vuetify作为我的前端，我试图创建文件上传，但只发送空数组。
下面是我的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>

下面是我的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);
      })      
    },

当我在“formData.append”之后执行

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

我得到了整个文件的内容在控制台，但请求发送到后端是空的。只有文件名在那里。你们有什么建议吗？

axios

来源：https://stackoverflow.com/questions/74995718/vuetify-v-file-input-send-empty-object-using-axios

1条答案

按热度按时间

jecbmhm31#

使用Vuetify的输入来上传文件的例子并不多，但是，在阅读了一些资料之后，我想出了这个解决方案--
从输入中删除v-model有两个原因-
1.它不会显示文件对象的数据。
1.每次上传时，都需要向后端发送一个请求，并且我们已经使用了change事件，该事件会将文件对象传递给其对应的方法，因此不需要将文件对象保存在其他任何地方。
这里有个例子

- 注意-**我使用了一个虚拟post 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>

赞(0）回复(0）举报 2023-01-05

我来回答

Vuetify< v-file-input>使用axios发送空对象

1条答案

相关问题

热门标签

最新问答