七牛js-sdk上传文件到服务器

2023-05-03,,

不能直接用form提交的形式上传七牛的某个服务器,比如:

$.ajax({
					                url:"https://up-z0.qiniu.com/",
					                type:"post",
					                data:form,
					                processData:false,
					                contentType:false,
					                success:function(data){					                	
								alert("附件已上传成功!");
										
					                },
					                error:function(e){					                			                   
					                }
					            });

因为跨域提交数据,浏览器会阻止该请求,提示:ERR_INSECURE_RESPONSE 

所以,要使用七牛的sdk,

首页,在页面引入:

<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>		
<script type="text/javascript" src='https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js'></script>

页面的文件控件:

<input type="file" class="myfile" name="file" id="myfile" />

js处理:

                         var domain = "";
			var funcNext=function(res){
				/* 接收上传进度信息,res 参数是一个带有 total 字段的 object,包含loaded(已上传大小,单位为字节。)、total(本次上传的总量)、percent(当前上传进度,范围:0~100。)三个属性,提供上传进度信息。*/
					console.log(res.percent);
					showInfo("已经上传"+res.percent+"%");
				}
			var funcError=function(err){
				/*上传错误后触发,参数 err 为一个包含 code、message、isRequestError 三个属性的 object */
				console.log(err.message);				
				alert("附件上传失败,"+err.message);
				
			}
			var funcComplete=function(res){
				/*接收上传完成后的后端返回信息,res 参数为一个 object,默认为hash和key, */
				console.log(domain+res.key);
				$("#logo").val(domain+res.key);
            	$("#fileTmpList").html("上传后文件:"+domain+res.key);
            	mainpic = true;
				sAlert("附件已上传成功!");
				swal.hideLoading();
			}			
					
			function myUpload(){				
				
				showLoading();				
				
				$.ajax({ 
					url:"getUpToken.jsp", 
					type:"post", 
					dataType : "json",
					success: function(data){
						if (data == null || data == '') {
							alert("远程获取token值为空!")
							return;
						}
						domain = data.domain;
						var fileBox = document.getElementById('myfile');
						var fileList = fileBox.files;						
						var filePath = $("#myfile").val();						
						var key1 ="aa_"+Date.parse(new Date())+filePath.substring(filePath.lastIndexOf("."),filePath.length);
											 
						var putExtra = { 
								fname: "", //文件原文件名 
								params: {},//用来放置自定义变量 
								mimeType: null  
								};
						var config = {
							      useCdnDomain: true,   //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
							      region: qiniu.region.z0     // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
							    };
						 var observable = qiniu.upload(fileList[0], key1, data.token, putExtra, config);
						 var subscription = observable.subscribe(funcNext, funcError, funcComplete) ;						
						   
					},
					error: function(){
						alert("远程获取token失败");
						hideLoading();
					}
				});	

	      
			
			}

《七牛js-sdk上传文件到服务器.doc》

下载本文的Word格式文档,以方便收藏与打印。