How to post a file from a form with axios

在使用 Axios 进行文件上传时，通常会采用 FormData 对象来构建表单数据，并利用 Axios 发送 POST 请求。这里是一个具体的实现步骤：

1. 创建 FormData 对象： 这个对象用于构建键值对，它将与普通的表单提交相同，其中可以包括文件对象。

2. 追加文件数据： 使用 FormData 的 append 方法将文件附加到表单数据中。

3. 发送请求： 使用 Axios 发起 POST 请求，并将 FormData 对象作为请求体传递。

4. 设置请求头（可选）： 在发送请求时，可以设置 Content-Type 为 multipart/form-data，但是通常情况下，浏览器会自动设置正确的 Content-Type 并包含边界字符串(boundary string)，所以这个步骤可以省略。

具体的代码示例如下：

javascript
// 引入 axios 库
import axios from 'axios';

// 准备上传的文件对象，例如从一个<input type="file">元素获取
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// 创建 FormData 实例
const formData = new FormData();
// 将文件数据追加到 FormData 实例中，'image' 是后端接口识别的字段名
formData.append('image', file);

// 设置 Axios 请求配置，如有需要可以在这里设置请求头等信息
const config = {
  headers: {
    // 'Content-Type': 'multipart/form-data' ，通常不需要手动设置
  },
  onUploadProgress: function(progressEvent) {
    // 这里可以处理上传进度事件
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
};

// 使用 axios 发起 POST 请求
axios.post('上传文件的URL', formData, config)
  .then(function (response) {
    // 处理响应数据
    console.log('文件上传成功：', response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.error('文件上传出错：', error);
  });

在上面的过程中，你可以看到，我是怎样创建 FormData 对象，并附上文件，然后通过 Axios 发送到服务器的。这种方式不仅用于文件上传，还可以上传其他类型的二进制数据。同时，通过监听 onUploadProgress 事件，我们可以获取上传的进度信息，为用户提供更好的交云体验。

将文件添加到formData对象，并将Content-Type标头设置为multipart/form-data.

shell
var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

使用 Vue 的示例应用程序。需要在本地主机上运行的后端服务器来处理请求：

shell
var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

分享我使用 React 和 HTML 输入的经验

定义输入字段

shell
<input type="file" onChange={onChange} accept ="image/*"/>

定义 onChange 监听器

shell
const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

这对我有用，我希望对某人有帮助。

shell
var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });