Fetch下的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
    });
}

你可能感兴趣的:(JavaScript,浏览器,文件上传,PUT)