⼀个html页⾯实现七⽜云上传简单上传例⼦
上传七⽜云⼀般有两种⽅式
第⼀种：是前端先传递给后端，后端再上传到七⽜云，后端存储⽂件外链
第⼆种：后端给前端上传的token，前端直接请求七⽜云上传⽂件，再将上传后的外链给后端
显然第⼆种⽅式更加节省带宽，节约服务器性能，七⽜云官⽅的⽂档已经⾮常全⾯了，在这⾥⽤最简单的形式再实现⼀下。
说明⼀下：后端返回的接⼝中ken 是后端算法⽣成，七⽜云有多种sdk可直接调⽤
data.doman是cdn空间绑定的域名，在上传图⽚前前端随机⽣成了⼀个⽂件名传递到七⽜云避免重名问题
下⾯粘贴代码，改下接⼝就能⽤：
<html>
<script src="libs.baidu/jquery/2.0.0/jquery.min.js"></script>
<script src="cdnjs.cloudflare/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;html制作一个网页
}
//获取⽂件后缀
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 = (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:"192.168.1.27/api/tool/qiniu",
dataType:'json',
success:function(result){
result.imgUrl =GenNonDuplicateID()+getType(fileName);
de ==0){
var observer ={//设置上传过程的监听函数
next(result){//上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
Math.al.percent);//查看进度[loaded：已上传⼤⼩(字节);total：本次上传总⼤⼩;percent：当前上传进度(0-100)] },
error(err){//失败后
ssage);
},
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: ion.z2,//存储区域(z0：代表华东;z2：代表华南，不写默认⾃动识别) //现在是华南的服务器        concurrentRequestLimit:3//分⽚上传的并发请求量
};
console.log(result);
var observable = qiniu.upload(file, result.imgUrl, ken, putExtra, config);
var subscription = observable.subscribe(observer);// 上传开始
// 取消上传
// subscription.unsubscribe();
}else{
ssage);//获取凭证失败
}
},
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。