前端上传图片到牛七云对象存储
网上找了半天资料,感觉有点坑,还是自己记录一下吧!
主要步骤
- 注册牛七账号-实名认证-创建对象存储空间-绑定域名
- 绑定域名可以使用默认的,建议使用自己从未使用过的二级域名;
- 这些都不是主题看看就好;
- 使用node生成上传需要的token,(也可以后端人员生成java等等都行)
- 需要Ak,Sk(秘钥管理查看),空间名称,自己在牛七找
- 前端发送ajax请求获取服务端生成的token,然后上传图片
- 上传图片需要把token带上,文件名带上(建议以当前时间戳+文件名,命名)
- 上传成功,牛七返回key就是文件名,使用你的牛七域名+key就是图片的地址;
核心代码
生成token
安装牛七模块,代码可复制,改下配置的秘钥和空间名即可;后端路由注意自己配置
let qiniu = require('qiniu'); // 需要加载qiniu模块的
let config = {
"AK":"你的AK",
"SK":"你的SK",
"Bucket":"你的空间名"
}
router.post('/token', async(req,res)=> {
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;
res.json({code,data,msg})
} else {
res.json({code,data,msg})
}
})
前端element代码
这个只是把图片上传的牛七而已,可以拿到返回的key获取到上传图片的地址
若需要其他的业务逻辑如上传头像等等,自己写
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'http://up-z2.qiniu.com', 上传的域名,在牛七查看,不同地区域名不同
uploadData: {key:'',token:''}, 后端发来的token
formAdd: { brandLogo: '' }
}
},
mounted() {
this.getQiniuToken()
},
methods: {
getQiniuToken(){
this.$axios.$post('/api/art/token',{}) 请求接口自己写后端接口
.then(res=>{
this.uploadData.token = res.data.uploadToken
})
},
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')
const isPNG = file.type === "image/png";
const isJPEG = file.type === "image/jpeg";
const isJPG = file.type === "image/jpg";
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isPNG && !isJPEG && !isJPG) {
this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
return false;
}
if (!isLt5M) {
this.$message.error("上传头像图片大小不能超过 5MB!");
return false;
}
this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
},
uploadError(err, file, fileList) {
this.$message({
message: "上传出错,请重试!",
type: "error",
center: true
});
},
}
}
</script>