前端上傳圖片到七牛云
- 首先，引入qiniu.js;
- 定義一個(gè)div元素，結(jié)構(gòu)看代碼
- 然后，上傳七牛云
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七牛云</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="aabb">
<div id="container" class="containe c-zy-up-item">
<div id="pickfiles">
<span><i class="iconfont iconjiahao"></i></span>
</div>
</div>
</div>
<div class="c-zy-up-img"></div>
<script src="../js/jquery.js"></script>
<script src="../js/qn/qiniu.min.js"></script>
<script>
var imgurl = xxx
$.ajax({
type: "post",
url: '獲取token的接口',
dataType: "json",
success: function(data) {
upToken = data.upToken
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
uptoken: data.data.UpToken,
get_new_uptoken: false,
domain: data.data.LinkUrl,
container: 'container',
max_file_size: '100mb',
flash_swf_url: 'path/of/plupload/Moxie.swf',
max_retries: 3,
dragdrop: false,
chunk_size: '4mb',
auto_start: true,
init: {
'FileUploaded': function(up, file, info) {
// 成功
console.log(data.data.LinkUrl + imgurl + '/' + file.name)
},
'Error': function(up, err, errTip) {
//失敗
},
'Key': function(up, file) {
var key = imgurl + '/' + file.name;
return key;
}
}
});
}
});
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
