这里引用的是七牛的的2.0版本
官方给出的两个例子有些复杂，我看的不是很明白，自己总结了一下用法，有不对的地方还望大家指出，
第一步：引入七牛云的js文件
引入地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js
第二步：七牛云上传的关键步骤
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe(observer);//上传开始
这两行代码中，我们关键的要处理的是参数的部分
file:我们要上传的图片文件，例如：var file = this.files[0];
key:上传文件的名称，例如：img.jpg
uptoken:从后台获取到的token值，后台还会返给我们个domain值，这个值在后面我们也会用到
putExtra：按照官方给出的模式写就可以了
var putExtra = {
fname: "",
params: {},
mimeType: ["image/png", "image/jpeg", "image/gif"] //这里是我们要上传的文件类型
};
config：
var config = {
useCdnDomain: true,
region: qiniu.region.z0//这个值要根据不同的地方设置不用的域
};
qiniu.region.z0: 代表华东区域
qiniu.region.z1: 代表华北区域
qiniu.region.z2: 代表华南区域
qiniu.region.na0: 代表北美区域
qiniu.region.as0: 代表东南亚区域
案例展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.imgshow{
width: 100%;
object-fit:cover;
height: 100%;
}
.pickFileBox{
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 8px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.pickFileBox input{
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0
}
.imgBox{
display: inline-block;
height: 80px;
width: 80px;
border: 1px solid #ccc;
border-radius: 8px;
margin-right: 10px;
}
</style>
</head>
<body>
<!--accept="image/*" 规定只可以上传图片-->
<div class="pickFileBox">
选择文件
<input type="file" name="" id="" value="" class="pickImg" accept="image/*"/>
</div>
<script src="jquery.min.js"></script>
<script src="qiniu.js"></script>
<script>
$(function(){
$('.pickImg').change(function(){
var file = this.files[0];
var key = file.name;
var fileType =key.substr(key.lastIndexOf('.'));//文件后缀名
$.ajax({
type:"post",
url:"获取token和domain的地址",
success:function(data){
var result = JSON.parse(data).Result;
var domain = result.Domain;
var uptoken = result.UpToken;
var UniqueKey = result.UniqueKey;
//设置这个方法的里面的几个参数：qiniu.upload(file, key, uptoken, putExtra, config)；observable.subscribe(observer);
var putExtra = {
fname: "",
params: {},
mimeType: ["image/png", "image/jpeg", "image/gif"]
};
var config = {
useCdnDomain: true,
region: qiniu.region.z0
};
var observer = {
next(res){
},
error(err){
alert('上传失败');
},
complete(res){
var _url = domain + '/' + res.key + '?imageView2/2/w/400';//上传成功之后得到的网络地址
console.log(_url);
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//e.target.result;显示的是本地的地址
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
var $img = '<div class="imgBox">'+
'<img src="'+_url+'" class="imgshow"/>'+
'</div>';
$('.pickFileBox').before($img);
//
}
}
};
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe(observer);//上传开始
}
});
});
});
</script>
</body>
</html>