vue3 typescript 如何将blob 对象里的二进制文件发送给API

在Vue3中结合TypeScript，如果你想将Blob对象中的二进制文件发送到API，通常会涉及FormData API，因为Blob可以方便地添加到表单数据中。这里是一个基本步骤：

1. 首先，你需要创建一个FormData实例，并将Blob对象添加到其中：

const fileInput = document.querySelector<HTMLInputElement>("input[type=file]")!; // 获取输入文件的元素
const file = fileInput.files![0]; // 获取用户选择的文件

// 将Blob转换为FormData
const formData: FormData = new FormData();
formData.append("file", file);

2. 然后你可以创建一个axios、fetch或者其他HTTP客户端库的请求，将FormData作为body发送：

import axios from 'axios';

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 设置正确的Content-Type
  }
})
.then(response => console.log('上传成功:', response.data))
.catch(error => console.error('上传失败:', error));

或者使用fetch：

async function uploadFile() {
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    const data = await response.json(); // 如果返回JSON，记得解析它
    console.log('上传成功:', data);
  } catch (error) {
    console.error('上传失败:', error);
  }
}
uploadFile();