文件上传
文件上传
流程：
- 客户端将文件数据发送给服务器
- 服务器保存上传的文件数据到服务器端
- 服务器响应给客户端一个文件访问地址
测试地址：http://xxx/api/upload
键的名称（表单域名称）：imagefile
请求方法：POST
请求的表单格式：multipart/form-data
请求体中必须包含一个键值对，键的名称是服务器要求的名称，值是文件数据
HTML5 中，JS 仍然无法随意的获取文件数据，但是可以获取到 input 元素中，被用户选中的文件数据
可以利用 HTML5 提供的 FormData 构造函数来创建请求体
举个栗子
<body>
<img src="" alt="" id="imgAvatar">
<input type="file" id="avatar">
<button>上传</button>
<script>
const fileServeUrl = 'http://xxx/api/upload';
const upload = async ()=> {
const ipt = document.querySelector('#avatar');
if (ipt.files.length === 0) {
alert('请选择文件后在上传！');
return;
}
if(!ipt.multiple) { // 不是多图
const formData = new FormData(); // 构建请求体
formData.append('imagefile', ipt.files[0]);
console.log("form", formData);
const resp = await fetch(fileServeUrl, {
method: "POST",
body: formData
});
return await resp.json();
}
}
document.querySelector('button').onclick = async ()=> {
const resp = await upload();
document.querySelector('img').src = resp.path;
}
</script>
</body>
本文作者：HuangBingQuan
本文链接：https://www.cnblogs.com/bingquan1/p/17908576.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步