前端如何处理后端传回来的base64
时间: 2023-07-27 08:13:39 浏览: 130
前端可以通过以下步骤处理后端传回来的base64:
1.获取后端传回来的base64字符串。
2.将base64字符串转换为二进制数据,可以使用atob()方法。
3.将二进制数据转换为Blob对象,可以使用new Blob()方法。
4.创建URL对象,将Blob对象转换为URL地址,可以使用URL.createObjectURL()方法。
5.将URL地址赋值给img标签的src属性,即可在前端页面展示图片。
以下是一个处理后端传回来的base64字符串并在前端显示图片的示例代码:
```javascript
// 获取后端传回来的base64字符串
const base64Str = 'data:image/png;base64,iVBORw0KG...';
// 将base64字符串转换为二进制数据
const binaryStr = atob(base64Str.split(',')[1]);
// 将二进制数据转换为Blob对象
const blob = new Blob([binaryStr], { type: 'image/png' });
// 创建URL对象,将Blob对象转换为URL地址
const imgUrl = URL.createObjectURL(blob);
// 在前端页面展示图片
const img = document.createElement('img');
img.src = imgUrl;
document.body.appendChild(img);
```
相关问题
java后端 blob转base64
可以使用Java的Base64类将Blob转换为Base64编码的字符串,例如:
```java
Blob blob = resultSet.getBlob("blob_column");
byte[] bytes = blob.getBytes(1, (int) blob.length());
String base64String = Base64.getEncoder().encodeToString(bytes);
```
注意要导入java.util.Base64类。
前端Vue 后端java 请用代码实现 用base64加密的方式前端传值后端解密
前端使用 Vue,后端使用 Java 来实现前端值后端解密的 base64 加方式,你可以按照以下步骤进行操作。
前端代码(Vue):
```html
<template>
<div>
<!-- 前端输入框 -->
<input v-model="inputData" type="text" placeholder="输入要加密的数据" />
<!-- 加密按钮 -->
<button @click="encryptData">加密</button>
<!-- 加密后的数据 -->
<p>加密后的数据:{{ encryptedData }}</p>
<!-- 传输到后端的数据 -->
<p>传输到后端的数据:{{ transmittedData }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputData: '',
encryptedData: '',
transmittedData: ''
};
},
methods: {
encryptData() {
// 使用 base64 加密数据
this.encryptedData = btoa(this.inputData);
// 传输到后端的数据为加密后的数据
this.transmittedData = this.encryptedData;
}
}
};
</script>
```
后端代码(Java):
```java
import java.util.Base64;
public class Main {
public static void main(String[] args) {
String transmittedData = "加密后的数据"; // 假设这是前端传输到后端的加密数据
// 解密传输过来的数据
byte[] decodedBytes = Base64.getDecoder().decode(transmittedData);
String decryptedData = new String(decodedBytes);
System.out.println("解密后的数据:" + decryptedData);
}
}
```
以上代码实现了前端使用 Vue 对输入的数据进行 base64 加密,并将加密后的数据传输到后端。后端使用 Java 对传输过来的数据进行解密,并输出解密后的数据。
请注意,这只是一个简单的示例,实际应用中可能需要更多的安全措施和错误处理。另外,前端使用了浏览器内置的 `btoa` 方法进行加密,后端使用了 Java 8 的 `Base64` 类进行解密。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)