前端处理后端传回的 Long 类型数据精度丢失

前端处理后端传回的 Long 类型数据精度丢失

1 问题描述

  直接抛问题,如下图所示:

在这里插入图片描述
  查看 Network 时,响应回来的 Long 类型数据和在控制台打印的数据出现的精度丢失的问题。

2 问题原因

  经查阅资料,原来 JS 内置有 32 位整数,而 number 类型的安全整数是 53 位。如果超过 53 位,则精度会丢失。正如现在后台传来一个 64 位的 Long 类型整数,因此超过了 53 位,所以后台返回的值和前台获取的值会不一样。

后端可以给前端传一个 Long 类型的数据,但是这个 Long 类型的数据也不能太长,不然 js 转换乏力。

3 解决办法

3.1 后端处理

  一般不需要进行实体类属性的数据类型修改,SpringBoot 中提供了一个解决方法,在 application.properties 配置文件中添加如下配置即可:

# 将所有数字转为 String 类型返回,避免前端数据精度丢失的问题
spring.jackson.generator.write-numbers-as-strings = true
3.2 前端处理
  • 设置数据接收类型: dataType : ‘text’

  • 在 success 回调函数里添加:res.data = handleResData(res.data)

  handleResData(str) 将所有对应的长整数 value,通过正则查出加上字符串的双引号标识,然后进行 JSON.parse() 转回 String。该方法并不能进行长整数计算,需要的话可以使用 long.js。

  • 以微信小程序来举例如下:
wx.request({
          url: '******',
          data: {
          },
          dataType: 'text',
          header: {
            'content-type': 'application/x-www-form-urlencoded', 
            'token': wx.getStorageSync('token')
          },
          method:  'POST',
          success: function(res){
            res.data = that.handleResData(res.data)
            // 数据处理
          },
          fail: function(err){}
        })
    

function handleResData(str){
	var _str = str
	for(var i = true; i == true;){
		var i = /[:][0-9]{18,}[,]?/.test(_str) 
		if(i == true){
		var handlestr = /[:][0-9]{18,}[,]?/.exec(_str)
		var handlestr2 = /[0-9]{18,}/.exec(handlestr[0])
		_str = _str.replace(handlestr[0], ':"'+handlestr2[0]+'",')
		}
	}
	_str = _str.replace(/[,][}]/g,'}')
	return JSON.parse(_str)
}
前端展示后端传递回来的文件,通常使用Element UI库的话,可以按照以下步骤操作: 1. 首先,你需要从后端API获取文件数据,这通常是作为`Blob`、`File`对象或者是URL形式。 2. 如果是`Blob`或`File`对象,你可以将其转换为一个URL以便于浏览器下载或预览。例如,对于`File`对象,可以使用`URL.createObjectURL(file)`创建一个临时URL。 ```javascript const file = ...; // 后端返回的File对象 const url = URL.createObjectURL(file); ``` 3. 使用Element UI的`el-upload`组件,设置`responseType`为`blob`或`arraybuffer`,然后处理`onSuccess`回调,将文件URL显示出来。如果需要直接预览,可以用`el-preview`组件展示图片,或者使用第三方库如`vue-file-preview`来预览其他类型的文件。 ```html <template> <el-upload :action="uploadUrl" :before-upload="beforeUpload" :response-type="responseType" :on-success="handleSuccess" > <el-button>点击上传</el-button> </el-upload> <!-- 或者 --> <el-preview v-if="fileUrl" :url="fileUrl" style="width: 200px;height: 200px;" ></el-preview> </template> <script> export default { data() { return { fileUrl: '', responseType: 'blob', // 或 'arraybuffer' }; }, methods: { beforeUpload(file) { // 这里可以添加文件大小限制或其他验证逻辑 }, handleSuccess(response, file) { if (response.type === 'blob') { this.fileUrl = URL.createObjectURL(response); } else if (ArrayBuffer.isView(response)) { // 对于非 Blob 类型数据,自行处理 } }, }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值