html 表单多个文件上传,form表单同时提交多个文件

Form表单

由于方便的原因，我们上传二进制文件一般会使用form表单来提交。

但是之前都是单个文件上传，现在需要同时上传多个二进制文件，所以来研究一下。

第一次时使用：

TIPS:选择文件时按CRTL进行多选

然鹅这个form表单的默认跳转有点头疼。所以最终还是采用下面这种方法同时上传多个文件

第二次时使用：

tip: input文件选择框的[0]里面存所选file文件，是数组。

window.onload = function() {

let uploadFiles = $("#upload")[0].files;

let otherParams = ""

let form = new FormData();

form.append('otherParams', otherParams);

for (i in uploadFiles) {

// 由于form表单的数据是绑定在name属性上的，而name可以多个相同(不像对象的键)

form.append("uploadFile", uploadFiles[i])

};

let config = {'你的配置项，已经声明数据是formData，此时可以不用配置,可以配置请求头之类的信息'}

axios.post("/xxx/xx", form，config).then(res => {

// 此时后台的Request对象中的files包含了前端上传的单个或多个二进制文件

}).catch(err => {

})

}

为什么提交文件时需要使用formdata呢?

form表单数据能根据用户所选的 文件地址,当submit会根据这个地址去本地找文件然后上传. 所以你看到的form里面的数据只有一个路径...