有一个需求是这样的,有两个组件,分别叫组件A和组件B,组件A显示头像,组件B上传头像,头像上传后实时更新组件A的头像数据。
组件A显示头像使用 computed
绑定 src
数据
<template> <img md-menu-trigger :src="avatarUrl" alt="Avatar" class="avatar-position"> </template> <script> import * as types from '../store/types' export default { data () { return { }; }, computed: { avatarUrl: function () { return this.$store.state.user.imgSrc } }, ...
组件B上传后,实时更新组件A头像
<template> <md-whiteframe md-elevation="4" class="center"> <md-toolbar class="md-dense"> <md-button class="md-icon-button" @click.native="backClick()"> <md-icon>keyboard_backspace</md-icon> </md-button> <h2 class="md-title flex-1">上传头像</h2> </md-toolbar> <div class="content"> <div class="img-container cursor-pointer" @click="imgClick()"> <img class="img-style" ref='imgAvatar' v-bind:src="imgSrc" alt="img" title="avatar" /> </div> <form> <input type="file" class="display-none" ref="fileData" id="input1" accept="video/*;capture=camcorder" @change="readFile()"/> <md-button class="md-raised md-primary upload-postion" @click.native="submit()">上传头像</md-button> </form> </div> </md-whiteframe> </template> <script> import * as types from '../store/types' export default { data () { return { } }, methods: { async submit () { let self = this if (self.$refs.fileData.files.length > 0) { let name = self.randomString() + '_' + self.fileName console.log(name) let url = await self.getUploadImageUrl(name) if (url) { self.axios.put(url, self.$refs.fileData.files[0], { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [ function (data) { return data } ] }) .then(response => { console.log(response) if (response.status === 200) { console.log('upload success') self.snackbarMessage = '操作成功! ' self.$refs.snackbar.open() let imgSrc = config.fileServer.replace(/"/g, '') + '/' + config.wewoS3Bucket.replace(/"/g, '') + '/' + name self.$store.commit(types.IMGSRC, imgSrc) self.updateImageData(name) } else { self.snackbarMessage = '操作失败,服务异常! ' self.$refs.snackbar.open() } }) } } else { self.snackbarMessage = '您好,请先选择图片! ' self.$refs.snackbar.open() } }, getUploadImageUrl (fileName) { let self = this return new Promise((resolve, reject) => { self.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.get_upload_image_url', [fileName]) .then( function (res) { console.log('url') console.log(res) resolve(res) }, function (err) { reject(err) }) }) }, updateImageData (imageName) { let self = this let whereStr = { 'userName': self.userName } self.whereData = {'where': whereStr, 'update': { 'img': imageName }} self.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.change_user_info', [self.whereData]) .then( function (res) { if (res === 1) { console.log('update success') } else { console.log('update error') } }, function (err) { console.log('err') console.log(err) } ) }, imgClick () { this.$refs.fileData.click() }, readFile () { var file = this.$refs.fileData.files[0] console.log(file) this.fileName = file.name if (!/image\/\w+/.test(file.type)) { alert('请确保文件为图像类型') return false } var reader = new FileReader() reader.readAsDataURL(file) var self = this reader.onload = function (e) { self.imgSrc = this.result var dataBase64 = this.result.replace('data:' + file.type + ';base64,', '') self.dataBase64 = dataBase64 } }, save () { let self = this let userName = this.userName let whereStr = { 'userName': userName } this.whereData = {'where': whereStr, 'update': { 'nikeName': this.nikeName, 'sex': this.sex, 'city': this.city, 'job': this.job }} this.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.change_user_info', [this.whereData]) .then( function (res) { if (res.ok === 1) { console.log('操作成功!') self.$refs.snackbar.open() } }, function (err) { console.log('err') console.log(err) } ) }, randomString (len) { len = len || 32 let timestamp = new Date().getTime() let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' let maxPos = $chars.length let randomStr = '' for (let i = 0; i < len; i++) { randomStr += $chars.charAt(Math.floor(Math.random() * maxPos)) } return randomStr + timestamp } }, ... } </script>