lrz(that)
.then(function(message) {
var formData = message.formData; //压缩之后我们拿到相应的formData上传
self.$axios
.post(testUrl, formData)
.then(function(res) {
console.log(res);
if (res && res.data.iRet == 0) {
formVal[imgType] = res.data.objData.sUrl;
//上传成功之后清掉数据防止下次传相同图片的时候不触发change事件
self.$refs[imgType].value = '';
/*
这里因为使用elementUI中的表单验证，
当上传图片完成之后还会提示没有上传图片
所以需要通知父组件清除该验证标记
*/
self.$emit('clearValidate', imgType);
self.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
} else {
throw res.data.sMsg;
}
})
.catch(function(err) {
self.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
//接口报错弹出提示
alert(err);
});
})
.catch(function(err) {
self.$nextTick(() => {
loadingInstance.close();
});
});
} catch (e) {
//关闭加载动画实例
self.$nextTick(() => {
loadingInstance.close();
});
}
}
},
mounted: function() {},
watch: {
/*
这里需要注意当父组件上传一个图片然后通过重置按钮重置的时候.
我们需要监听一下,防止上传同一张图片上传失败
*/
formVal: {
handle: function(newVal, oldVal) {
var imgType = this.imgType;
if (newVal[imgType] == '') {
//这里使用了原生js写法当然也可以通过ref引用找到，后者更好
document.getElementsByClassName('upload-input')[0].value = '';
}
}
}
}
};
</script>
<style scoped>
/*
这里是默认的设置图片的尺寸。可以通过父组件传值将其覆盖
*/
.upload-box {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
}
.upload-box img {
width: 100%;
height: 100%;
}
.upload-box .upload-input {
position: absolute;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
</style>
商品页中使用upload组件
在good.vue中我们引入upload组件。并且传递相应表单对象，需上传的图片类型的属性，以及图片显示样式给子组件
good.vue核心代码:
<template>
