文件上传、分片上传（react）

文件上传（整体上传）

关于上传功能，其实有很多的插件去支持。我这里使用原生的input标签进行上传功能的开发。

i n d e x . j s x \color{green}{index.jsx} index.jsx


function handelChooseFile() {document.getElementById('chooseFiles').click()
}function handelFileChange(e: any) {fileToFormData(e)}// 转fromdata格式async function fileToFormData(e: any) {let files: any = e.targetif (!files.files.length) return// 上传文件 创建FormDatalet formData = new FormData()// 遍历FileList对象，拿到多个图片对象for (let i = 0; i < files.files.length; i++) {// formData中的append方法 如果已有相同的键，则会追加成为一个数组  注意:这里需要使用formData.getAll()获取formData.append('file', files.files[i], files.files[i].name)}let uploadData: any = formData.getAll('file')// 将input的值清空，解决第二次选择的文件与第一次相同时不会出发onchange事件。e.target.value = nulllet idFemales: any = await Storage.get({ key: 'lParentId' })uploadData.forEach((item: any, index: number) => {item.lParentId = idFemales.valueitem.create_time = moment(item.lastModifiedDate).format('YYYY-MM-DD HH:mm:ss')item.id = new Date().getTime() + index.toString()})Storage.set({ key: 'isUploadBack', value: 'true' })history.push({ pathname: '/uploadList', state: uploadData })}<input type="file" id="chooseFiles" multiple onChange={(e: any) => handelFileChange(e)} /><div onClick={handelChooseFile}>从本地文件选择</div>

i n d e x . s c s s \color{green}{index.scss} index.scss

#chooseFiles {width: 0;height: 0;opacity: 0;overflow: hidden;position: absolute;z-index: -1;
}

multiple属性是支持多选。我这里没有控制文件的格式，因为需要支持任意格式的数据。关于格式限制可以自行这里写div可以自定义上传按钮的样式。将input标签隐藏，通过点击div达到点击到input的效果。万能的div就可以自己任意布局了！

在input的onChange事件中，在 e.target中就可以拿到选中的所有文件的file数据了。
因为后端接口需要FormData格式的数据，所以这里进行的格式转换。转换完成后对于uploadData的遍历是增加我上传需要的一些信息，文件夹id、创建时间这些。

这里需要注意一下，因为上传选择的文件是没有唯一id标识的。所以如果要做上传失败后的重试功能会存在问题。因此我在这里通过时间戳+index的方式创建了唯一id。

history.push({ pathname: ‘/uploadList’, state: uploadData }) 因为我需要做上传列表。这里进行了跳转，实际上传的流程是在uploadList这个页面进行的。这里将上传的数据携带过去。

上传的请求要根据后端接口的实际情况来，我这里需要调用多个接口完成上传。较为复杂，所以在此假设后端用一个接口，这个接口就是接收上传数据，然后完成上传的功能举个例子。

u p l o a d L i s t . j x s \color{green}{uploadList.jxs} uploadList.jxs

componentWillUnmount(() => {// 拿到跳转时候携带过来的上传数据let newUploadList: any = history.location.state// 开始上传流程for (let i = 0; i < newUploadList.length; i++) {let parame = newUploadList[i]utils.post(uploadUrl, parame).then((res) => {console.log(res)}).catch((err) => {console.log(err)})}
})

utils.post是自己封装的post请求，uploadUrl为上传的接口url，将拿到的上传数据交给后端接口，完成上传。

分片上传

有时候我们上传的文件可能比较大，这个时候分片上传就显得尤为重要。其实分片上传很简单。当初第一次听到分片上传我是比较懵的。顾名思义，分片上传就是把一个文件分成多个片段，然后传给后端，后端将我们前端分割的所有片段再按顺序拼接起来就OK了。（这里就需要跟后端去讨论了，标识每一段的顺序什么的）

// 我按照15M每片的大小进行分割
let chunkNumber: any = Math.ceil(item.size / (1024 * 1024 * 15)) // 总片数（能分多少片）
let chunkSize: any = 1024 * 1024 * 15 // 每片大小
let chunks: any = [] // 总片段
for (let i = 0; i < chunkNumber; i++) {if (i < chunkNumber - 1) {// file为我们要上传的文件，也就是input上传时选中的文件。直接通过slice就可以实现对文件的切割。chunks.push(file.slice(chunkSize * i, chunkSize * (i + 1)))} else {chunks.push(file.slice(chunkSize * i, file.size))}
}

这样我们就把一个大文件按照15M分一片的方式切割好了，假设是一个32M的文件，通过分割，我们就切成了：chunks[15M, 15M, 2M]这样一个数组。然后通过循环将这个数组的每一片传给后端就OK了。是不是很简单。