Fetch下的PUT文件上传

来源:互联网 发布:淘宝商品怎么上架 编辑:程序博客网 时间:2024/05/22 08:28

浏览器中常见的文件上传方式(POST)

由于form表单仅支持GET和POST两种请求模式,过往常见的文件上传方式使用的是POST。具体的用法是给form表单设置 enctype=“multipart/form-data”(体现 在请求头Content-Type中)。
这种方式下文件内容被加工后封装在请求体里,通过特定的字符串(也记录在请求头Content-Type中)分隔开请求参数和文件内容,服务器端接收到请求后根据请求头中的Content-Type信息解读form-data的真实内容。

PUT方式的文件传输

新的浏览器接口中增加了File FileReader Blob Fetch等接口,为文件上传提供了新的选择。C/S模式开发时服务器端文件上传接口多采用POST或PUT;RESTful类型API增多的限制,PUT方式的文件上传API也增多。针对于PUT方式的接口,可采用Fetch/XmlHttpRequest进行(注意使用较新的浏览器,本文代码在chrome55下测试通过,其他浏览器可能存在兼容性问题)。

Fetch方式的传输举例

function send() {    var f = document.getElementById('f'); //input file控件    var uploadReq = new Request(url, { //url为服务器接口URL        method: "PUT",        body: f.files[0]    });    fetch(uploadReq).then(x => x.text()).then(x => {        console.log(x); //此处假定响应信息是text    });}
0 0
原创粉丝点击