「短文」如何在 Vue 中通过 Axios 上传文件

将 Vue 3 与 Axios 一起使用，您只需单击几下即可轻松上传文件。使用 input 标签并指定文件类型，浏览器将允许您上传的指定文件类型。

Axios 可以 POST FormData 实例，这使得上传文件变得容易。用户选择文件后，您可以通过将 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('https://httpbin.org/post', formData, { headers }).then((res) => {
          res.data.files; // binary representation of the file
          res.status; // HTTP status
        });
      }
    }
  });
  app.$mount("#content");

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载