1.文件上传流程
1）客户端将文件数据发送给服务器
2）服务器保存上传的文件数据到服务器端
3）服务器响应给客户端一个文件访问地址
2.与服务器端的约定
1）键的名称（表单域名称）：imagefile
2）请求方法：POST
３）请求的表单格式：multiparty/form-data
4）请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据
【注】HTML5中，JS仍然无法随意获取文件数据，但是可以获取到input元素中，被用户选中的文件数据
【注】可以利用HTML5提供的FormData构造函数来构造请求体
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><img src="" alt="" id="imgAvatar"><input type="file" id="avatar"><button>上传</button><script>async function upload() {//获取表单信息const inp = document.getElementById('avatar');//判断是否已选择上传文件if (inp.files === 0) {alert("请选择要上传的文件");return;}const formData = new FormData(); //构建请求体formData.append("imagefile", inp.files[0]);//添加键值对const url = "http://101.132.72.36:5100/api/upload";const resp = await fetch(url, {method: "POST",body: formData});const result = await resp.json();return result}document.querySelector("button").onclick = async function () {const result = await upload();const img = document.getElementById("imgAvatar");img.src = result.path;}</script></body></html>
