1.文件上传流程
1)客户端将文件数据发送给服务器
2)服务器保存上传的文件数据到服务器端
3)服务器响应给客户端一个文件访问地址
2.与服务器端的约定
1)键的名称(表单域名称):imagefile
2)请求方法:POST
3)请求的表单格式: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>