vue上传文件 blob

可以使用 HTML5 中的 FormData 和 XMLHttpRequest 对象来上传 Blob 类型的文件，具体步骤如下：

1. 创建一个 FormData 对象，用于存储上传的文件数据和其他参数。

const formData = new FormData();

2. 将 Blob 对象添加到 FormData 中。

formData.append('file', blob, 'filename');

其中，'file' 是指上传文件的字段名，blob 是指要上传的 Blob 对象，'filename' 是指上传文件的文件名。

3. 创建一个 XMLHttpRequest 对象，用于发送上传请求。

const xhr = new XMLHttpRequest();

4. 设置 XMLHttpRequest 对象的请求方法、请求地址和是否异步等属性。

xhr.open('POST', '/upload', true);

其中，'POST' 是指上传文件的请求方法，'/upload' 是指上传文件的请求地址，true 是指请求是否异步。

5. 设置 XMLHttpRequest 对象的请求头，指定上传文件的类型。

xhr.setRequestHeader('Content-Type', 'multipart/form-data');

6. 发送上传请求，并监听上传进度和上传完成事件。

xhr.upload.addEventListener('progress', function(event) {
  // 上传进度监听
});

xhr.upload.addEventListener('load', function(event) {
  // 上传完成监听
});

xhr.send(formData);

以上就是使用 Vue 上传 Blob 类型的文件的步骤。具体实现可以参考以下代码：

// 获取上传文件
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

// 创建 Blob 对象
const blob = new Blob([file], { type: file.type });

// 创建 FormData 对象
const formData = new FormData();
formData.append('file', blob, 'filename');

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 设置请求方法、请求地址和是否异步等属性
xhr.open('POST', '/upload', true);

// 设置请求头，指定上传文件的类型
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

// 监听上传进度和上传完成事件
xhr.upload.addEventListener('progress', function(event) {
  console.log('上传进度：', event.loaded / event.total);
});

xhr.upload.addEventListener('load', function(event) {
  console.log('上传完成！');
});

// 发送上传请求
xhr.send(formData);