WEB之文件传输

最新推荐文章于 2024-07-03 11:38:35 发布

雨_生

最新推荐文章于 2024-07-03 11:38:35 发布

阅读量890

点赞数

分类专栏：学习路程 ——漫漫远行文章标签：文件转换base64编码文件分片上传

本文链接：https://blog.youkuaiyun.com/smalCat/article/details/86142591

版权

学习路程 ——漫漫远行专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的文件分片上传实例，使用JavaScript的FileReader API进行文件读取，并将其转换为Base64编码，通过AJAX分多次上传至服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js之文件对象

FileReader
简单的一个文件分片上传实例

function upFile () {
	获取文件对象
	let file =  files[0]
	新建表单对象
	let upData = new FormData()
	读取存储在用户计算机上的文件,构造函数实例
	let File = new FileReader()
	这里依据base64位编码发给后端，所以我需要将文件转换成64位编码
	let base64 = null
	每次上传的文件大小`slice_size`
	let sliceSFile = file .slice((count - 1) * slice_size, count * slice_size))
	转换文件为base64编码
	File.readAsDataURL(sliceSFile )
	然后监听file函数加载事件，是否转换完成
	File.addEventListener('load', () => {
		base64 = File.result
		// 因为不需要文件标识，所以这里我为了只获得文件编码，把标识截掉了
		base64 = base64.slice(base64.indexOf(',') + 1)
		// 数据添加到表单对象
		upData.append('base64', base64)
		// 添加token,重复上步骤
		`(count - 1) * slice_size`为每次发送的base64编码,count为当前为止发送了多少次
		开始上传数据
		 $.ajax({
	        url: gdocUpload, //用于文件上传的服务器端请求地址
	         type:"post",
	         async: false,
	         data: upData,
	         contentType:false, //禁止ajax 自动添加请求头
	         processData:false, // 禁止ajax 自动转换数据格式
	         success: function (res) {
	             if (res.status === true) {
	             	`slice` 为总分片数
	                 if(count === slice) {
	                     console.log(res, '33333');
	                     count = 1;
	                     // 文件已经全部上传，执行后续操作
	                    ..........
	                 } else {
	                 	文件还未完全上传，循环执行上传操作
	                     count++
	                     upFile(id)
	                 }
	             }
	         }
	     })
	})
}