H5移动端（不用input）上传多个文件到服务器

最新推荐文章于 2024-07-12 15:49:20 发布

Zmj_Dns

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量2.8k

点赞数 1

分类专栏： HTML5+

本文链接：https://blog.csdn.net/Zmj_Dns/article/details/83348241

版权

本文介绍了如何在H5移动端不使用input标签，而是通过拍照、选择图片并进行压缩，将图片转换为base64再转为File，然后利用FormData上传多个文件到服务器的方法。详细步骤包括图片获取、压缩、转换和上传，并提供了一段实现Demo的JS代码。

摘要由CSDN通过智能技术生成

首先说input标签 + FormData是可以上传多个文件到服务器的，但是IOS上照片一般都比较大，如果不做压缩，每次上传都失败，很是无奈。在网上看了一下，有很多压缩的方法，感觉比较麻烦，于是结合H5+的文档利用FormData自己写了一个上传的方法。

思路

1.拍照或者选择图片并获取图片的路径

2.压缩图片

3.找到压缩完的图片先转换成base64再转换成可以添加到FormData上传的File

4.添加数据上传

实现Demo

js部分：

//综合二次压缩 +文件访问 + 文件转换base64 +转换 blob类型的File
compressPicAndAttData = function(picPath,funsuc){//压缩
	plus.zip.compressImage(
		{
			src:picPath,
			dst:"_doc/"+ (new Date()).valueOf() +".jpg",
			quality:10
		},
		function(suc){
			var newPath = suc.target;
			var newSize = suc.size;
			console.log("压缩完路径：" + newPath + "文件大小：" + newSize);
			if(newSize > 1000000){//判断文件过大进行二次压缩
				plus.zip.compressImage(//二次压缩，一般经过2次压缩文件一般不会超过500K
					{
						src:newPath,
						dst:"_doc/"+ (n