前端base64转文件流并发送文件流给后端
时间: 2024-02-04 10:04:02 浏览: 88
前端可以通过以下步骤将base64转换为文件流并发送给后端:
1. 将base64字符串转为字节数组
```javascript
const base64str = 'data:image/png;base64,iVBORw0KG...'; // 示例base64字符串
const byteCharacters = atob(base64str.split(',')[1]); // atob函数将base64字符串转为二进制数据
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers); // 将字节数组转为Uint8Array类型
```
2. 创建Blob对象,并将Uint8Array数据放入其中
```javascript
const blob = new Blob([byteArray], { type: 'image/png' }); // 创建Blob对象
```
3. 创建FormData对象,并将Blob对象放入其中
```javascript
const formData = new FormData();
formData.append('file', blob, 'filename.png'); // 将Blob对象放入FormData对象中
```
4. 发送FormData对象给后端
可以使用XMLHttpRequest或fetch方法将FormData对象发送给后端。
使用XMLHttpRequest方法:
```javascript
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
```
使用fetch方法:
```javascript
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => {
console.log(response.text());
}).catch(error => {
console.error(error);
});
```
以上代码仅供参考,具体实现可能需要根据实际需求进行修改。
阅读全文