js 使用fetch来上传文件 formdata()

 <input type="file" name="" id="file">
    <script>
        // 文件上传
        // 流程: 
        // 1. 客户端将文件数据发送给服务器
        // 2. 服务器保持上传的文件到服务端
        // 3. 服务器响应给客户端一个文件访问地址
        // 键的名称(表单域名称): 服务端要求
        // 请求方法: Post
        // 请求表单的格式: 一般为 multipart/form-data
        // 请求体重必须包含一个键值对,键的名称是服务器要求的名称,值是文件数据
        // HTML中,JS仍然随意获取文件数据,但是可以获取到input元素中,被用户选中的文件数据
        async function upload() {
            const inp = document.getElementById("file");
            if (inp.files.length === 0) {
                alert("请选择上传文件")
                return false;
            }
            // 这里的请求体自己构建比较麻烦,一般使用HTML5里面的formData来构建
            const formData = new FormData();
            formData.append("key", inp.files[0]);
            const url = "xxxx.xxx.xxxx";
            const resp = await fetch(url, {
                method: "POST",
                body: formData //自动修改请求头,formdata的默认请求头的格式是 multipart/form-data
            })
            const res = await resp.json();
            // res 就是服务器返回的结果
        }
    </script>