Vue异步上传图片数据绑定失败解决方法

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,同时也完美解决了上传后无法绑定的问题,传递的是对象,也不必拼接字符串。

小站主要是个人在开发过程中遇到的问题,解决方案的记录,与君分享。
vsalw技术博客 » Vue异步上传图片数据绑定失败解决方法

提供最优质的资源集合

立即查看 了解详情