封装API,获取七牛云token
api.js
export const getImgToken = {
getToken: params => request({
method: 'POST',
url: '/qiniuyun',
data: qs.stringify(params)
}),
}
elementUI上传组件内
<el-upload
地址
action="https://up-z2.qbox.me"
:data="qiniuToken"
>
这里的src定义在ruleForm内或data内任意位置都可以
<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
...
import { getImgToken } from '@/utils/api'
data内存储七牛token
data(){
return {
qiniuToken: {
token: ""
}
}
},
初始化获取token,赋值给data
created() {
getImgToken.getToken().then(res => {
res.code == "0" ? (this.qiniuToken.token = res.data.qiniutoken) : 0
})
}
上传成功钩子改变data内的图片路径字符串
methods:{
handleAvatarSuccess(res) {
this.ruleForm.imageUrl = "http://pty2tfogv.bkt.clouddn.com/" + res.hash;
}
}