应用台导航页
  • 主页
  • 博客
  • 知识库
  • 工作台
  • 集萃
  • 友链
  • 关于
Fetch API 上传图片

Fetch API 上传图片

技术
更新于 2023-08-04
— 673 字
返回

使用 Fetch API 将 image 标签中的图片以二进制格式上传到服务器的示例代码:

javascript
const imgUrl = document.getElementById('myImage').src;
fetch(imgUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
const formData = new FormData();
const file = new File([buffer], 'image.png', { type: 'image/png' });
formData.append('imageFile', file);
return fetch('/upload/image', {
method: 'POST',
body: formData,
});
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
console.log('Image uploaded!');
})
.catch(error => {
console.error('Error:', error);
});
  1. 使用 Fetch API 发送一个 GET 请求获取图片文件。
  2. 响应返回后,将其转换为 ArrayBuffer 类型
  3. 创建一个 File 对象,然后将其添加到 FormData 对象中。
  4. 使用 Fetch API 发送一个 POST 请求,并将 FormData 对象作为请求体发送到服务器。错误通过 catch 捕获并处理。
dors logoDors

Dors 是花野猫开发为知识工作者打造的数字花园应用,包含的博客、个人记事本、及其他实用功能。

花园

  • 花坛——博客
  • 果园——知识库

工坊——作者开发的实用工具

  • 小记
  • 秒切——一键按秒分割视频
  • 中国重点高校地理位置可视化网站
  • 中国行政区划数据查询平台
  • excel 重命名工具

misc

  • 生活章程
  • 画廊
  • just have fun!

© 2022 - present. All Rights Reserved.滇ICP备2025063395号-1

花野猫打造