formdata多文件上传详解

小蓝 • 2024-11-13 06:05 • 编程

一、formdata多文件上传有接口

使用formdata进行文件上传，需要后端有对应的接口能够接收文件，一般常用的后端语言如PHP、Java、Nodejs都有相关的支持。在前端需要知道后端接口的地址，以及接口向前端返回的需要处理的数据格式。

二、formdata文件上传json

formdata上传的数据，可以使用json格式的数据进行传输，而且在后端处理也比较简单。下面是一个使用json格式上传文件的示例代码：

let formData = new FormData();
formData.append("file", file);
formData.append("data", JSON.stringify(data));

三、formdata文件上传

使用formdata进行文件上传，需要将选择上传的文件添加到formdata中，可以使用input标签的文件选择器进行文件选择，也可以通过JS的方式把文件添加到formdata中。下面是一段JS代码，通过input选择器添加文件到formdata中：

let input = document.createElement("input");
input.type = "file";
input.onchange = function() {
    let file = input.files[0];
    let formData = new FormData();
    formData.append("file", file);
}

四、formdata文件后台接受

后端需要使用合适的方式来接受前端上传的formdata数据，一般使用常用的后端语言，如PHP、Java、Nodejs都有相应的方法。下面是一个使用PHP接收formdata数据的示例代码：

$file = $_FILES["file"];
$data = $_POST["data"];

五、formdata文件上传最大限制

使用formdata进行文件上传时，需要注意上传文件的最大限制，根据不同的后端语言，需要做相应的配置，否则会出现文件上传失败或上传的文件被截断。下面是一个PHP设置上传文件大小的示例代码：

ini_set("upload_max_filesize", "20M");

六、formdata上传图片的原理

在使用formdata上传图片时，原理是把图片文件转成二进制格式的数据，然后把二进制数据存储在formdata中上传到服务器，服务端再通过相应的方式将这些二进制数据还原为图片文件。

七、前端formdata文件上传

前端使用formdata进行文件上传一般有两种方式，一种是通过input标签的文件选择器添加文件到formdata中，另一种是通过JS的方式通过文件流的方式把文件添加到formdata中。下面是一个使用JS文件流方式上传文件的示例代码：

let file = new File(["hello world"], "hello.txt", {type: "text/plain"});
let formData = new FormData();
formData.append("file", file);

八、formdata上传多个文件

formdata也支持上传多个文件，只需要在添加文件到formdata的时候，把文件添加到formdata的相应的key中。下面是一个上传多个文件的示例代码：

let input = document.createElement("input");
input.type = "file";
input.multiple = true;
input.onchange = function() {
    let files = input.files;
    let formData = new FormData();
    for(let i=0; i<files.length; i++) {
        formData.append("file"+i, files[i]);
    }
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/152633.html