Fetch API 上传图片

Fetch API 上传图片

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

技术
更新于 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 捕获并处理。