一个html页面实现七牛云上传简单上传例子

最新推荐文章于 2021-06-07 14:19:34 发布

念威

最新推荐文章于 2021-06-07 14:19:34 发布

阅读量1.3k

点赞数

分类专栏：摸索文章标签： js jquery upload html

本文链接：https://blog.csdn.net/oNuoZuo/article/details/110632256

版权

摸索专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上传七牛云一般有两种方式
第一种：是前端先传递给后端，后端再上传到七牛云，后端存储文件外链
第二种：后端给前端上传的token，前端直接请求七牛云上传文件，再将上传后的外链给后端

显然第二种方式更加节省带宽，节约服务器性能，七牛云官方的文档已经非常全面了，在这里用最简单的形式再实现一下。

后端SDK下载：https://developer.qiniu.com/kodo/sdk/1240/objc
前端开发文档：https://developer.qiniu.com/kodo/sdk/1283/javascript

说明一下：后端返回的接口中data.token 是后端算法生成，七牛云有多种sdk可直接调用
data.doman是cdn空间绑定的域名，在上传图片前前端随机生成了一个文件名传递到七牛云避免重名问题

下面粘贴代码，改下接口就能用：

<html>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.1.2/qiniu.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//生成一个用不重复的ID
		function GenNonDuplicateID() { // 生成32位长度的字符串
			var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; // 可以作为常量放到random外面
			var result = "";
			for (var i = 0; i < 32; i++) {
				result += str[parseInt(Math.random() * str.length)];
			}
			return result;
		}

		//获取文件后缀
		function getType(file) {
			var filename = file;
			var index1 = filename.lastIndexOf(".");
			var index2 = filename.length;
			var type = filename.substring(index1, index2);
			return type;
		}

		$(function() {
			$("#upload").on("click", function() {
				var obj = $("#file");
				var fileName = obj.val(); //上传的本地文件绝对路径
				var suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length); //后缀名
				var file = obj.get(0).files[0]; //上传的文件
				var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 *
					1024 * 1024)).toFixed(2) + 'GB' : (file.size /
					(1024 * 1024)).toFixed(2) + 'MB' : (file.size /
					1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; //文件上传大小
				//七牛云上传
				$.ajax({
					type: 'post',
					url: "http://192.168.1.27/api/tool/qiniu",
					dataType: 'json',
					success: function(result) {
						result.imgUrl = GenNonDuplicateID() + getType(fileName);
						if (result.code == 0) {
							var observer = { //设置上传过程的监听函数
								next(result) { //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
									Math.floor(result.total.percent); //查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
								},
								error(err) { //失败后
									alert(err.message);
								},
								complete(res) { //成功后
								console.log()
									// ?imageView2/2/h/100：展示缩略图，不加显示原图
									// ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高
									$("#image").attr("src", result.data.domain + "/"+result.imgUrl + "?imageView2/2/w/400/h/400/q/100");
								}
							};
							var putExtra = {
								fname: "", //原文件名
								params: {}, //用来放置自定义变量
								mimeType: null //限制上传文件类型
							};
							var config = {
								region: qiniu.region.z2, //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别) //现在是华南的服务器
								concurrentRequestLimit: 3 //分片上传的并发请求量
							};
							console.log(result);
							var observable = qiniu.upload(file, result.imgUrl, result.data.token, putExtra, config);
							var subscription = observable.subscribe(observer); // 上传开始
							// 取消上传
							// subscription.unsubscribe();
						} else {
							alert(result.message); //获取凭证失败
						}
					},
					error: function() { //服务器响应失败处理函数
						alert("服务器繁忙");
					}
				});
			})
		})
	</script>
	<body>
		    <input type="file" name="image" id="file" accept="image/*">
		    <input type="button" id="upload" value="upload">
		    <img id="image" src="#" alt="">
	</body>
</html>