- 实现效果如下
头像会直接调用相册及手机拍照功能,上传成功后自动更新更改头像
2.利用cube-ui组件实现,template代码如下
<!-- 头像 -->
<cube-upload
ref="upload"
v-model="files"
:action="action"
@files-added="addedHandler"
@file-error="errHandler"
class="tou"
>
<div class="clear-fix">
<cube-upload-file
v-for="(file, i) in files"
:file="file"
:key="i"
style="display:none"
></cube-upload-file>
<cube-upload-btn :multiple="false">
<div class="bigbox" style="margin-top: 0px">
<div class="touxiang">
<span class="t">头像</span>
<i
class="iconfont icon-arrow-right-copy-copy"
style="font-size: 20px; margin-top: 30px"
></i>
<div class="toux" style="position: relative">
<img
:src="info.head_img || defaultHeadImg"
alt="头像"
style="width: 100%; height: 100%;"
/>
</div>
</div>
</div>
</cube-upload-btn>
</div>
</cube-upload>
3.script代码
<script>
export default {
name: "qrCode",
data() {
return {
action: {
target: "http://192.168.123.44:8089/api/v1/pri/user/user_face",//这里是自己设置的接口
headers: {
token: this.$store.state.token,//请求头携带token
},
},
files: [],
};
},
computed: { //缓存,获取vuex中保存的的token
...mapState(["token"]),
getToken() {
return this.$store.state.token;
},
},
methods: {
addedHandler() {
const file = this.files[0];
file && this.$refs.upload.removeFile(file);
this.$createToast({
type: "success",
txt: "上传成功",
time: 1000,
$events: {
timeout: () => {
// this.$router.replace('/personal')
location.reload();//上传成功后自动刷新页面,刚上传的头像显示出来
}
}
}).show();
},
errHandler(file) {//上传失败
// const msg = file.response.message
this.$createToast({
type: "warn",
txt: "Upload fail",
time: 1000,
}).show();
},
},
mounted() {
if (this.getToken) {
this.getInfo();
}
},
};
</script>