Fetch下的PUT文件上传_xfetch put file-CSDN博客

本文探讨了浏览器中文件上传的传统POST方式与新兴PUT方式。介绍了如何利用Fetch API实现PUT方式的文件上传，并对比了这两种方式的技术细节。

浏览器中常见的文件上传方式(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
    });
}