FromData()；解析与实践，axios / ajax多文件上传data配置，初级程序员必看

在实现多文件上传时，我们通常需要将文件数据转换为FormData格式，以便通过HTTP请求发送。以下是使用axios和ajax实现多文件上传的示例代码。

使用axios上传多个文件

const axios = require('axios');
 
// 假设files是一个文件数组，例如通过<input type="file" multiple>获得
const files = document.querySelector('input[type=file]').files;
 
const formData = new FormData();
 
for (let i = 0; i < files.length; i++) {
    formData.append('file' + i, files[i]);
}
 
axios.post('/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).then(response => {
    console.log(response.data);
}).catch(error => {
    console.error(error);
});

使用jQuery $.ajax上传多个文件

const files = $('#file-input').get(0).files;
const formData = new FormData();
 
for (let i = 0; i < files.length; i++) {
    formData.append('file' + i, files[i]);
}
 
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,  // 告诉jQuery不要处理发送的数据
    contentType: false,  // 告诉jQuery不要设置Content-Type请求头
    success: function(response) {
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error uploading files:', textStatus, errorThrown);
    }
});

在这两个示例中，我们首先获取文件列表，然后使用FormData对象将它们添加到请求中。在axios的情况下，我们需要将Content-Type设置为'multipart/form-data'，因为我们正在发送二进制数据。在jQuery的情况下，我们设置processData和contentType为false，这样jQuery就不会处理或设置请求的Content-Type，这对于文件上传是必要的。