這裡引用的是七牛的的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[];
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: %;
object-fit:cover;
height: %;
}
.pickFileBox{
position: relative;
display: inline-block;
background: #D0EEFF;
border: px solid #99D3F5;
border-radius: px;
padding: px px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: ;
line-height: px;
}
.pickFileBox input{
position: absolute;
font-size: px;
right: ;
top: ;
opacity:
}
.imgBox{
display: inline-block;
height: px;
width: px;
border: px solid #ccc;
border-radius: px;
margin-right: px;
}
</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[];
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>
![Python筆記：爬蟲下載下傳圖檔的基本思路（requests就能搞定）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)