vue图片上传组件使用详解

this.imgList.push(imgUrl);
this.upImgList.push(upImg);
let upImgAll = this.upImgList.join(',');
this.$emit('input', upImgAll);
}).catch((err) => {
console.log(err);
})
},

删除图片操作

我这删除仅仅是对最后提交的图片数组进行处理，并未对上传到图片服务器上的图片进行移除处理

// 删除图片
delImg (index) {
 this.imgList.splice(index, 1);
 this.fileList.splice(index, 1);
 this.upNum = this.imgList.length;
 let imgAll = this.imgList.join(',');
 this.$emit('input', imgAll);
},

最后我在组件中监听了图片改变

watch: {
 imgList () {
  this.$emit('changeNum'); //触发父组件中验证资料是否完整的方法
 }
 },

就是这样了，一个简易的上传组件（写的不是很好，轻喷），还有可以优化的地方，后面改完再看看吧