原生JS处理多文件上传到腾讯云（对象存储）

最新推荐文章于 2024-06-06 14:00:31 发布

是悟能了

最新推荐文章于 2024-06-06 14:00:31 发布

阅读量3.3k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41485414/article/details/82659139

版权

JS 专栏收录该内容

70 篇文章 3 订阅

订阅专栏

写在前面

其实在这篇文章之前呢已经写过一篇关于文件上传的文章了，名字是文件上传腾讯云，如果看这篇文章的话，希望还是先看看我之气那写的那篇文章，不然下面的可能直接看的话会有一些迷惑。

废话不说，既然是上传，就免不了单文件或者多文件上传的问题，那么其实目前很多的框架都是有上传功能的，只要是将接口写好，直接用就行了，就是包括腾讯云也是提供一个接口我们直接使用就可以的，下面我们就使用腾讯的接口完成多文件上传的处理。

效果：

结果：

PS：状态是200的时候说明你是上传成功了！

文件上传有几个问题需要处理：

第一：拿到文件的名字

第二：拿到文件本身

第三：多文件的时候，需要将文件存储到数组里面，上传的时候遍历出来

这三个问题我们一个一个解决

拿到文件名字其实很简单：

 selectedFile = document.getElementById('fileSelector').files[0];
 filename = selectedFile.name;

拿到文件本身也很简单：

  selectedFile = document.getElementById('fileSelector').files[0];

最后是将每一次用户选择以后的文件存储到数组里面，这个其实也不难：

var arrfilename = new Array();
var arrfile = new Array();
arrfilename.push(filename); 
arrfile.push(selectedFile);

最后这些都处理好了，我们就可以进行上传的操作了

看源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input id="fileSelector" type="file" name="filename">
		<div id="tab" class="tab">
			<table>
				<thead>
					<tr><td>名称</td><td>大小</td></tr>
				</thead>
				<tbody id="tb">
				</tbody>
			</table>
		</div>
		<input id="submitBtn" type="button" onclick="upload()" value="提交">
	</body>
	<script type="text/javascript">
	 var selectedFile;	
	 var filename;
	 var arrfilename = new Array();
	 var arrfile = new Array();
	 $("#fileSelector").change(function(){  
		 /* 选择文件操作*/
	 	     selectedFile = document.getElementById('fileSelector').files[0];
			 /* 拿到文件名字*/
	 	     filename = selectedFile.name;
			 /* 拿到文件大小*/
			 filesize = selectedFile.size;
			 /* 将文件名字和文件本身存进数组*/
			 arrfilename.push(filename);
			 arrfile.push(selectedFile);
			 /* 将文件和大小一一罗列出来*/
			 var tb = '<tr><td>'+filename+'</td><td>'+filesize+'</td></tr>';
			 console.log(count);
			 $("#tb").append(tb);
		});  
	 function upload(){
		 /* 遍历数组*/
		 for(var i = 0;i<=arrfilename.length;i++){
		 	var cos = new COS({
		 	SecretId: '*****************************',
		 	SecretKey: '**************************',
		 	})
		 		cos.putObject({
		 		Bucket: 'ky-1254466590',  
		 		Region: 'ap-shanghai',  
				/* 名字获取数组下标*/
		 		Key: arrfilename[i],
		 		StorageClass: 'STANDARD',
		 		Body: arrfile[i], // 上传文件对象(通过下标获取)
		 		onProgress: function(progressData) {
		 			console.log(JSON.stringify(progressData));
		 		}
		 	}, function(err, data) {
		 		console.log(err || data || - Url);
		 		console.log("URL是："+data.Location);
		 	});	
		 }
	 }
	</script>
</html>

PS：代码是可以直接使用的，但是里面的js引用路径以及secretId和secretkey还有Bucket和Region的参数改成自己的就

是悟能了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS处理多文件上传到腾讯云（对象存储）

写在前面其实在这篇文章之前呢已经写过一篇关于文件上传的文章了，名字是文件上传腾讯云，如果看这篇文章的话，希望还是先看看我之气那写的那篇文章，不然下面的可能直接看的话会有一些迷惑。废话不说，既然是上传，就免不了单文件或者多文件上传的问题，那么其实目前很多的框架都是有上传功能的，只要是将接口写好，直接用就行了，就是包括腾讯云也是提供一个接口我们直接使用就可以的，下面我们就使用腾讯的接口完成多文...
复制链接

扫一扫