那存入的时候怎么存,把多个图片上转为blob,返回时前端也能解析出来,可以用逗号隔开吗
时间: 2024-09-23 08:16:11 浏览: 37
当你想要一次上传多张图片到服务器并作为一个blob存储时,通常的做法不是简单地用逗号分隔,而是通过一种常见的技术,例如使用FormData或FileReader API。下面是一种常见的做法:
1. **前端上传**:
- 使用HTML的`input[type=file]`元素让用户选择多个图片文件,或者一次性选取。
- 创建一个FormData对象,将选中的图片文件添加进去,文件名通常会被保留。
示例:
```javascript
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编码),或者提供一个下载链接等。
示例:
```json
{
"blobUrl": "data:image/jpeg;base64," + btoa(blob),
"fileNames": ["image1.jpg", "image2.png"]
}
```
前端可以通过解析这个JSON响应,然后根据文件名再次解析blob,例如:
```javascript
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
}
```
注意,这种方式并不适用于大文件的上传,因为它可能会造成性能问题。对于大文件,通常建议仍然分开上传、处理和返回。
阅读全文