使用Vue上传文件

要怎么使用Vue上传文件？将 Vue 2 与 Axios 一起使用，您只需单击几下即可轻松上传文件。使用<input>标签并指定文件类型，浏览器将允许您选择要从计算机上传的文件。

Axios 可以 POSTFormData实例，这使得上传文件变得容易。用户选择文件后，您可以通过将JavaScript blob添加到FormData实例来上传它。下面是一个例子。

  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('http://httpbin.org/post', formData, { headers }).then((res) => {
          res.data.files; // binary representation of the file
          res.status; // HTTP status
        });
      }
    }
  });
  app.$mount("#content");