Vue异步上传图片数据绑定失败解决方法
业务概述：页面加载调用后台方法获取数据（后台返回shop实体）绑定前端shop，shop里面很多字段，,前台直接接收绑定，如果shop.logo有图片就显示，没有就显示上传按钮，因为在上传图片时候是异步请求，要求是图片上传后，页面要把图片显示出来，但是上传是异步的，没办法绑定shop. logo属性，页面无法显示图片。
解决方法：
1.多创建一个属性logo,注意不是shop.logo. 初始化绑定的时候把后台shop.logo也绑定到logo, 实际shop.logo=logo=后台shop.logo
代码：getData: function () {
let id = this.$route.params.id;
let that = this;
let shopUrl = /api/v1/shop/detail/ + id;
axios.get(shopUrl)
.then(function (response) {
that.shop = response.data; //绑定shop
that.logo=response.data.logo; //绑定logo
})};
2.页面判断有没有值来显示图片还是显示上传图片使用logo,不是shop.logo
代码：<div class="form-group col-lg-6"> <label class="col-sm-6 control-label">门店logo：</label> <div class="col-sm-8 upload" v-if="!logo" style="padding-left: 150px;"> <div class="img-box no-img col-lg-12 align-center " style="padding-left: 50px;"> <h3 style="margin-top: 60px;margin-right: 40px;">上传Logo</h3> </div> <div class="col-lg-12 align-center"> <input type="file" @change="onFileChange"> </div>
</div> <div class="col-sm-8" v-else style="padding-left: 150px;"> <div class="img-box img col-xs-12" v-if=" /.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(logo)"> <img :src="logo"/> </div> <div class="img-box no-img col-xs-12" v-else> </div> <div class="col-lg-12 " style="padding-left: 150px;"> <button class="btn btn-sm btn-primary" @click="removeImage">移除Logo </button> </div> </div> </div>
3.如果有图片就能显示了，下面还有一个移除按钮，点击移除就是取消绑定，代码如下：
removeImage: function (e) { this.shop.logo = null; this.logo=null; },
4.可以显示了，也可以移除了，那么上传怎么做呢？上传是异步请求，传到后台上传后，后台会返回这个图片的上传后的url,就是类似http://xxx.com/ssss.jpg，只需要把图片url绑定到shop,logo即可，实际上是绑定不上的，所以一开始用了一个logo，虽然是一样的，但是还是需要这个。绑定的时候还是都绑定，同时绑定shop.logo和logo=后台返回的URL.上传和绑定的代码如下：
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},createImage(file) {
let vm = this;
let uploadUrl = /api/v1/up;
let formData = new FormData();
formData.append('file', file);
axios.post(uploadUrl, formData, {
headers: {
'Content-Type': 'multiple/form-data'
}
}).then(function (response) {
vm.shop.logo = response.data.fileUrl; //同时绑定
vm.logo=response.data.fileUrl; //同时绑定
})
},
5.看似多此一举，时间上显示和绑定用的是logo,但是传递到后台的时候还是传shop对象，没有用到logo，同时也完美解决了上传后无法绑定的问题，传递的是对象，也不必拼接字符串。
