Blob {size: 45374, type: 'data:image/jpeg;base64'}将blob格式转为formData

您可以使用`FormData`对象将`Blob`转换为`FormData`。以下是一个示例代码：

// 创建一个新的FormData对象
var formData = new FormData();

// 从Blob中获取文件名
var fileName = "image.jpg";

// 将Blob添加到FormData中
formData.append('file', blob, fileName);

在上面的示例中，我们创建了一个新的`FormData`对象，并使用`append`方法将`Blob`对象添加到其中。第一个参数是字段名称，第二个参数是`Blob`对象，第三个参数是文件名（可选）。

您可以根据需要添加更多的字段和值到`FormData`对象中，例如：

formData.append('name', 'John Doe');
formData.append('age', 25);

请注意，`FormData`对象可以用于将数据发送到服务器，以便进行文件上传等操作。

相关问题

下面这串代码什么作用？ async takePhoto() { if (this.cameraOn) {//摄像头是否开启 开启了才执行上传信用图片 //获得Canvas对象 let video = document.getElementById('video') let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') ctx.drawImage(video, 0, 0, 200, 200) // toDataURL --- 可传入'image/png'---默认, 'image/jpeg' let img = document.getElementById('canvas').toDataURL() //构造post的form表单 let formData = new FormData() //convertBase64UrlToBlob函数是将base64编码转换为Blob formData.append('file', this.base64ToFile(img, 'examTakePhoto.png')) //上传阿里云OSS await ossUtils.uploadImage(formData).then((resp) => { if (resp.code === 200) this.takePhotoUrl.push(resp.data) }) }

这段代码的作用是：当摄像头开启时，调用 takePhoto() 函数，使用 canvas 将视频流截取成宽高都是 200px 的图片，然后将图片转成 base64 编码，再将其转换为 Blob 对象，最终将该 Blob 对象上传至阿里云 OSS 对象存储中。同时，上传成功后将返回的 URL 存储在 takePhotoUrl 数组中。 这段代码是一个用于上传信用图片的函数，在摄像头开启后，调用该函数就可以将截取的图片上传至阿里云 OSS 中。

那存入的时候怎么存，把多个图片上转为blob，返回时前端也能解析出来，可以用逗号隔开吗

当你想要一次上传多张图片到服务器并作为一个blob存储时，通常的做法不是简单地用逗号分隔，而是通过一种常见的技术，例如使用FormData或FileReader API。下面是一种常见的做法：

1. **前端上传**：
- 使用HTML的`input[type=file]`元素让用户选择多个图片文件，或者一次性选取。
- 创建一个FormData对象，将选中的图片文件添加进去，文件名通常会被保留。

示例：

   let formData = new FormData();
   for(let i = 0; i < files.length; i++) {
     formData.append('images[]', files[i]);
   }

2. **后端接收**：
- 后端收到的是一个包含多个文件的数据结构，比如Node.js的`multer`中间件可以处理这种请求。
- 将所有文件合并为一个blob，或者分别保存到数据库（如MongoDB的Binary数据类型）或文件系统（多个文件）。

3. **返回时处理**：
- 当从后端获取到blob时，可以将其打包成JSON响应，其中包含一个指向blob的url（通常使用base64编码），或者提供一个下载链接等。

示例：

{
  "blobUrl": "data:image/jpeg;base64," + btoa(blob),
  "fileNames": ["image1.jpg", "image2.png"]
}

前端可以通过解析这个JSON响应，然后根据文件名再次解析blob，例如：

let blobUrlArray = JSON.parse(response).blobUrl.split(',');
for(let i = 0; i < blobUrlArray.length; i++) {
  let blob = atob(blobUrlArray[i].replace("data:image/jpeg;base64,", ""));
  // ...进一步处理每个blob
}

注意，这种方式并不适用于大文件的上传，因为它可能会造成性能问题。对于大文件，通常建议仍然分开上传、处理和返回。