vuejs,前端如果保存了比较大量的数据要如何处理

Question

上传财务账单,前端在上传文件的时候做了数据解析,将近30万条,点击上传按钮的时候需要将这30万条数据传给后端,

现在在上传的时候会报Message length exceeded maximum allowed length.,而且解析文件的时候浏览器非常卡,有什么好的解决方案么?

onSelectOriginalFile(result) {

        this.notifySuccessParsing();

        this.data = UploadDataParser.parseShipmentCheck(result);//数据转换

      }

      

submit() {

ReconciliationResource.import(this.data);//将数据传给后端

}

Answer 1

很简单，把解析的工作交给后端，前端把整个文件传上去就行了。js不适合用来干CPU密集型的任务，你在前端用for或while去解析文件是非常烧CPU的，除非你用WebAssembly（不过我也没试过），而且这个过程还是同步的，所以你会觉得卡。所以解决方案就是把文件传给后端，后端用C或其它更合适的语言解析，然后再分页传回前端或干别的什么事。一定要在前端烧客户的CPU的话，可以考虑以下几件事情：改客户端，不再使用普通的浏览器，改用Electron；尝试WebAssembly解析文件；优化文件结构，加速解析，如果坚持使用普通浏览器做客户端的话可以让客户先把文件转成json格式（专门写个工具什么的，我也不知道你们原始格式是啥），然后前端JSON.parse，不过如果文件太大的话也要parse很久。另外信息太大无法一次性发送的问题我没遇到过，不过应该不是什么很麻烦的事情，毕竟网盘传大文件都没问题，这个自行查阅吧hhh。我现在能想到的就是可以使用WebSocket流式上传。

Answer 2

javascript本身是单线程的，适合做IO操作，不适合做密集的计算工作；不过把什么都放在后端做也不太靠谱，毕竟后端资源有限；为了解决卡顿问题，可以试试worker