要怎么使用Vue上傳文件？將 Vue 2 與 Axios 一起使用，您只需單擊幾下即可輕松上傳文件。使用<input>標(biāo)簽并指定文件類型，瀏覽器將允許您選擇要從計(jì)算機(jī)上傳的文件。

Axios 可以 POSTFormData實(shí)例，這使得上傳文件變得容易。用戶選擇文件后，您可以通過將JavaScript blob添加到FormData實(shí)例來上傳它。下面是一個(gè)例子。

  const app = new Vue({
    data: () => ({images: null}),
    template: `
      <div>
        <input type="file" @change="uploadFile" ref="file">
        <button @click="submitFile">Upload!</button>
      </div>
    `,
    methods: {
      uploadFile() {
        this.Images = this.$refs.file.files[0];
      },
      submitFile() {
        const formData = new FormData();
        formData.append('file', this.Images);
        const headers = { 'Content-Type': 'multipart/form-data' };
        axios.post('https://httpbin.org/post', formData, { headers }).then((res) => {
          res.data.files; // binary representation of the file
          res.status; // HTTP status
        });
      }
    }
  });
  app.$mount("#content");