前端如何接收base64
时间: 2023-10-22 17:10:31 浏览: 34
前端可以使用 `FileReader` 对象读取 base64 编码的文件内容。具体步骤如下:
1. 创建一个 `FileReader` 实例。
```javascript
const reader = new FileReader();
```
2. 通过 `readAsDataURL` 方法读取 base64 编码的文件内容。
```javascript
reader.readAsDataURL(file);
```
其中,`file` 是一个 `File` 或 `Blob` 对象,表示要读取的文件。
3. 在 `load` 事件中获取读取结果。
```javascript
reader.addEventListener('load', () => {
const result = reader.result;
// 处理读取结果
});
```
其中,`reader.result` 就是读取到的 base64 编码的文件内容。
完整的代码示例:
```javascript
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', () => {
const file = input.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', () => {
const result = reader.result;
// 处理读取结果
});
});
```
相关推荐
![](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)