应用台导航页
  • 主页
  • 博客
  • 知识库
  • 工作台
  • 集萃
  • 友链
  • 关于
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 捕获并处理。

相关内容

  • 高考备战计划 day 5

    高考备战计划 day 5

    更新于2026-04-21

  • 备战高考计划 day4

    备战高考计划 day4

    更新于2026-04-21

  • 全国高校名录数据集的构建

    全国高校名录数据集的构建

    更新于2026-04-20

  • 备战高考计划 day3

    备战高考计划 day3

    更新于2026-04-20

  • 全国普通高等学校名单中不包军校名单

    全国普通高等学校名单中不包军校名单

    更新于2026-04-20


选项
文章 ID: 20

相关内容

  • 高考备战计划 day 5

    高考备战计划 day 5

    更新于2026-04-21

  • 备战高考计划 day4

    备战高考计划 day4

    更新于2026-04-21

  • 全国高校名录数据集的构建

    全国高校名录数据集的构建

    更新于2026-04-20

  • 备战高考计划 day3

    备战高考计划 day3

    更新于2026-04-20

  • 全国普通高等学校名单中不包军校名单

    全国普通高等学校名单中不包军校名单

    更新于2026-04-20

dors logoDors

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

花园

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

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

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

misc

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

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

花野猫打造