前端如何上傳圖片到七牛云
流程：
1砌些、七牛云后臺(tái)的對(duì)象存儲(chǔ)功能
2、node.js后臺(tái)生成七牛云的token
3、前端利用element UI/ice 的upload組件
4浊服、文件名和token作為參數(shù)請(qǐng)求到七牛云后臺(tái)
第一步 node.js后臺(tái)生成七牛云的token
token
const accessKey = 'TSlScX_akS5TIpsXlkq*****7Efk-ZaZeg4ZWtta';
const secretKey = 'X-MGLySWVrWFIQKTn***WDIBvb3ni4Zm3qwZNKxk';
const bucket = 'deluntiyun';
如何獲取這三個(gè)參數(shù)
image.png
accessKey 就是AK
secretKey 就是SK
image.png
bucket 就是你的空間名字
我的token是koa后臺(tái)請(qǐng)求回來的，附上代碼 node的話qiniu模塊
非node的話自行查詢Node.js SDK
let qiniu = require('qiniu'); // 需要加載qiniu模塊的
const accessKey = 'TSlScX_akS5TIpsXl****gy7Efk-ZaZeg4ZWtta';
const secretKey = 'X-MGLySWVrWFI****87HWDIBvb3ni4Zm3qwZNKxk';
const bucket = 'deluntiyun';
router.post('/token', async(ctx, next)=> {
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
scope: bucket,
expires: 3600 * 24
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken= putPolicy.uploadToken(mac);
if (uploadToken) {
ctx.body = Code('re_success', uploadToken)
} else {
ctx.body = Code('re_error')
}
})
token也是在前端來生成的胚吁， 加載qiniu模塊牙躺，利用其方法就可以生成token
第二步 上傳到七牛云 - React
upload組件 ice Upload 上傳組件
// 用來刪除圖片的
onUploadChange(info) {
if (info.file.status == 'removed') {
this.setState({
fileList: [],
values: Object.assign({
avatar: ''
})
})
}
}
<Col xxs="16" s="10" l="6">
<IceFormBinder name="avatar" required message="必填">
<ImageUpload
listType="picture-card"
limit={1}
action={this.state.qiniu.url}
fileList={this.state.fileList}
accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
data={this.state.qiniuToken}
locale={{
image: {
cancel: '取消上傳',
addPhoto: '上傳圖片',
},
}}
formatter={(res)=>{
// 七牛云返回的數(shù)據(jù) { hash:"FjIEDVNzhgmsU7cOBtkAXV7VuhvJ"，key:"FjIEDVNzhgmsU7cOBtkAXV7VuhvJ"}
let imgURL = this.state.qiniu.qiniuPath + "/" + res.key;
this.setState({
fileList: [{
status: "done",
downloadURL: imgURL,
fileURL: imgURL,
imgURL: imgURL
}],
value: Object.assign(this.state.value, {
avatar: imgURL
})
})
}}
onChange= {this.onUploadChange.bind(this)}
/>
</IceFormBinder>
</Col>
附上網(wǎng)友大神的ice組件代碼腕扶，雖然不是用七牛云的
52A911F6-D3A8-4cb0-A041-202644CCA761.png
第二步 上傳到七牛云 - Vue
ui框架 element-ui el-upload
koa2 請(qǐng)求到七牛云的token
let qiniu = require('qiniu'); // 需要加載qiniu模塊的
const router = require('koa-router')()
router.prefix('/api/admin/qiniu')
let config = {
"AK":"TSlScX_akS5TIpsXlkqHH2gy7Efk-ZaZeg4ZWtta",
"SK":"X-MGLySWVrWFIQKTn87HWDIBvb3ni4Zm3qwZNKxk",
"Bucket":"mobile-phone-shell"
}
router.post('/token', async(ctx, next)=> {
let mac = new qiniu.auth.digest.Mac(config.AK, config.SK);
let code = '1',msg = '', data = {};
let options = {
scope: config.Bucket,
expires: 3600 * 24
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken= putPolicy.uploadToken(mac);
if (uploadToken) {
code = '0';
data.uploadToken = uploadToken;
ctx.body = {code, data, msg}
} else {
ctx.body = {code, data, msg}
}
})
module.exports = router
前端代碼
<el-upload
<el-upload
style='position: relative;top: 10px;height: 120px;'
:file-list='fileList'
class="avatar-uploader"
:limit='1'
:action="uploadUrl"
accept="image/jpeg,image/gif,image/png,image/bmp"
list-type="picture-card"
:data='uploadData'
:on-success="handleAvatarSuccess"
:on-error="uploadError"
:before-upload="beforeAvatarUpload"
:on-preview="doLookImg"
:on-remove="doDeleteImg">
<i class="el-icon-plus"></i>
</el-upload>
<script>
export default {
data() {
return {
uploadUrl: 'http://up-z0.qiniu.com',
uploadData: {key:'',token:''},
formAdd: { brandLogo: '' }
}
},
mounted() {
getQiniuToken({}).then((res)=> {
console.log(res);
if (res.code === '0') {
this.uploadData.token = res.data.uploadToken
}
})
},
methods: {
doDeleteImg(file, fileList) {
console.log('刪除成功',file, fileList)
let logoAry;
let key;
if (this.editState) {
logoAry = this.mainInfo.brandLogo.split('/');
} else {
logoAry = this.formAdd.brandLogo.split('/');
}
key = logoAry[logoAry.length - 1];
deleteQiniuImg({key}).then(res=> {
if (res.code === '0') {
if (this.editState) {
this.mainInfo.brandLogo = '';
} else {
this.formAdd.brandLogo = '';
}
} else {
this.$message.error(res.msg)
}
})
},
doLookImg() {
this.uploadDialogVisible = true;
this.uploadDialogImg = this.editState ? this.mainInfo.brandLogo : this.formAdd.brandLogo;
},
handleAvatarSuccess(res, file, fileList) {
console.log('上傳成功', res,file, fileList)
let hash = res.hash;
let key = res.key;
if (this.editState) {
this.mainInfo.brandLogo = qiniuConfig.qiniuPath + '/' + key;
} else {
this.formAdd.brandLogo = qiniuConfig.qiniuPath + '/' + key;
}
},
beforeAvatarUpload(file) {
console.log(file, 'beforeAvatarUpload')
// var observable = qiniu.upload(file, key, token, putExtra, config)
const isPNG = file.type === "image/png";
const isJPEG = file.type === "image/jpeg";
const isJPG = file.type === "image/jpg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isPNG && !isJPEG && !isJPG) {
this.$message.error("上傳頭像圖片只能是 jpg孽拷、png、jpeg 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("上傳頭像圖片大小不能超過 2MB!");
return false;
}
this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
},
uploadError(err, file, fileList) {
this.$message({
message: "上傳出錯(cuò)半抱，請(qǐng)重試脓恕！",
type: "error",
center: true
});
},
}
}
</script>
