前言
我们在日常的工作中和面试中,经常遇到文件上传的问题。文件上传也是一个前端必备的技能之一。今天好好聊聊这个文件上传。
单文件上传
单文件上传就很好理解,就是一个文件上传。我们只是需要准备好,后端提供的接口需要的数据格式就好了。比如常见的接口需要提供的数据格式,文件名称,文件。我们通过axios+ formData的方式提交给后端,后端会帮助我们去处理的。这是一种常见且简单的文件上传方式之一。
多文件上传
多文件上传,也是我们在工作中经常遇到的。我们进行多文件上传的时候,需要拿到所有上传的文件。如果服务端没有做文件重命名的话。可能需要前端来做,具体看你们的后端是否勤快。前端做文件重命名的话主要是基于spark-md5这个库来做的。需要把上传文件数据转为二进制流的格式。然后用切片(slice)的方式把文件切成固定大小的数量,存到数组里面,循环发送给服务器、服务端就可以接收到了,然后接收完成后,就可以请求合并文件。多文件上传的时候,可能还涉及到进度条的计算。我们可以通过axios的内置函数onUploadProgress来进行监听获取上传的进度。也可以用上传成功的总大小去除以文件的总大小。实现的方式有很多种,看自己喜欢哪一种,都行。
断点续传
原理是,上传到服务器端的文件就不再上传了。然后把新的文件上传到服务端。这就是断点续传的思想。代码实现起来也比较简单。
总结
我们在日常的工作中,经常遇到的上传文件操作的时候,可以理解了这些原理,再去做的话,会更加简单的哦。