Fetch API 上传图片

Fetch API 上传图片

使用 Fetch API 将 image 标签中的图片以二进制格式上传到服务器的示例代码:使用 Fetch API 发送一个 GET 请求获取图片文件。响应返回后,将其转换为 ArrayBuffer ...

花野猫

花野猫

更新于 2023-08-04

649

使用 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 捕获并处理。