前端把base64码怎么换成地址路径
时间: 2023-08-08 17:04:28 浏览: 89
前端将base64编码的内容转换成地址路径,一般需要经过以下几个步骤:
1. 将base64编码的内容转换成Blob对象。
2. 使用FormData对象将Blob对象转换成二进制流。
3. 发送POST请求,将二进制流上传到服务器。
4. 服务器返回上传成功后的文件地址路径。
5. 前端使用该文件地址路径来显示图片或其他类型的文件。
以下是一个示例代码,可以将base64编码的内容转换成地址路径:
```javascript
function uploadBase64ToServer(base64Str) {
// 将base64编码的内容转换成Blob对象
const blob = dataURItoBlob(base64Str);
// 使用FormData对象将Blob对象转换成二进制流
const formData = new FormData();
formData.append('file', blob, 'filename.jpg');
// 发送POST请求,将二进制流上传到服务器
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// 服务器返回上传成功后的文件地址路径
const filePath = data.filePath;
// 使用该文件地址路径来显示图片或其他类型的文件
displayFile(filePath);
})
.catch(error => {
console.error(error);
});
}
function dataURItoBlob(dataURI) {
// 将dataURI转换成Blob对象
const byteString = atob(dataURI.split(',')[1]);
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
```
在上面的代码中,`uploadBase64ToServer`函数接收一个base64编码的字符串,将其转换成二进制流并上传到服务器。服务器返回上传成功后的文件地址路径,`displayFile`函数用于使用该文件地址路径来显示图片或其他类型的文件。`dataURItoBlob`函数用于将base64编码的字符串转换成Blob对象。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)