开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天
1、七牛云上，创建空间，配置域名
1、七牛云上，创建空间，配置域名
2、从台获取上传所用的token，例：
3、页面elementui 代码
// 七牛上传地址https://upload-z2.qiniup.com （华南）
<el-form-item label="头像:">
<el-upload
class="avatar-uploader"
action="https://upload-z2.qiniup.com"
:data="qiniuData"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:on-remove="handleRemove"
>
<img
:src="formPerson.imgUrl"
alt=""
v-if="formPerson.imgUrl"
class="avatar"
/>
<img :src="formPerson.imgUrl" alt="头像" v-else />
</el-upload>
</el-form-item>
export default {
data(){
return{
qiniuData: {
key: "", //图片名字处理
token: "", //七牛云token
},
qiniuUpAdd: "http://qiniu.scyylove.com",
}
}
}
methods(){
//获取token
getQiniuToken() {
this.postRequest("/home/auth/getQiniuToken", {})
.then((res) => {
console.log(res, "七牛云token");
if (res.code == 200) {
this.qiniuData.token = res.data.qiniu_token;
}
})
.catch((err) => {
console.log(err);
});
},
//图片上传之前
beforeAvatarUpload(file) {
// console.log(file);
let suffix = file.name;
let key = `upload_pic_${new Date().getTime()}_${file.name}`; // 自定义七牛云需要的key ，也就是域名后的名字，一般就是名字加时间戳，要保证名字不重复
this.qiniuData.key = key;
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M && this.qiniuData;
},
//上传成功之后
handleAvatarSuccess(res, file) {
console.log(res, file, "图片地址");
this.formPerson.imgUrl = `${this.qiniuUpAdd}/${res.key}`; //把七牛空间上的域名,拼接到返回结果上，这就是完整的路径了，可以回传给后台
},
//返回结果
//看第四条
}
4、上传成功之后结果返回
5、上传地址分布
6、总结
上传七牛云其实没什么难的，重点是读懂文档和注意事项，这当中有几个易错点。1.是获取token，要和后端配合好，2.上传的服务端地址要和七牛云控制台的应用匹配，不然会出错的
