ES6之文件上传

ES6之文件上传

如何进行文件上传，可以分为三个步骤：
1.需要拿到文件数据
2.上传到服务器并保存结果
3.从服务器拿到返回结果

async function upload() {
    const url = 'http://localhost:9527/api/upload';
    const inp = document.querySelector('input[type="file"]');
    const files = inp.files[0];//拿到上传的文件信息
    const formData = new FormData();//创建请求体
    formData.append('imagefile', files);//添加上传文件的键值对
    const resp = await fetch(url, {
        method: 'POST',
        body: formData,//自动修改请求头，不用再加content-type
    })
    const result = await resp.json();
    return result;
}
document.querySelector('button').onclick = async function () {
    const result = await upload();
    document.querySelector('img').src = result.path;
}

已经搭好了一个后端服务器，然后拿到 file 类型的 input 元素，只有添加 file 属性之后 js才有权限拿到相应的数据，通过 inp.file[0] 可以拿到，file 里面是一个伪数组，里面可以存放多个数据。
这时我们需要发送一个 post 请求，这种上传文件的请求体很特殊，它会使用分隔符进行分割，并且需要在 Content-Type 中添加 multipart/form-data ，手动设置会很麻烦。我们一般采用 FormData() 构造函数创建。这个函数可以在里面直接添加 form 元素。我们可以通过 append() 向里面添加上传文件规定的键 imagefile ，以及添加可以拿到的文件数据。上传文件必须使用键值对的格式。
之后使用 fetch 上传，请求头不用设置，会根据请求体自动设置请求头。
拿到响应结果之后，注意是 Promise 格式，将响应解析出来添加到相应的位置。