vue vant-upload多选上传图片心得

效果图

文件类型限制

首先从官方文档中可以看到开启多选上传需要 multiple 不写这个肯定是无法多选的。在上传限制中需要的方法，因为本次做的图片的多张上传，所以需要用到accept方法限制

accept=".png, .jpg, .jpeg"

各位可以根据自身需求去限制哈 。

文件大小限制

上传图片肯定要限制图片大小，不然用户上传个几十几百MB的图片 那不就炸了…因此可以用到max-size方法限制，具体方法如下

:max-size="2000 * 1024"  // 文档 100代表100kb  

我做的限制最大是2MB，有了限制肯定需要提示对吧，没关系 oversize 方法可以做到

@oversize="onOversize"   // 方法命名
onOversize(file) {  // 官方方法有很多回调  这里暂时用不到 大家可以去测试
		this.$toast('文件大小不能超过2M'); 
},

到这里是不是已经觉得差不多了，但是还差点什么呢？

图片上传最大张数限制

是的，既然图片是多张上传，肯定需要数量限制嘛，不然整个几百张那也得炸… 因此可以用到max-count这个方法限制，具体方法如下：

:max-count="5"  // 限制几张就填数字就可以了

我这边做的是限制最大上传数量是5张，是不是已经很完美了呢

上传方法

官方给出的上传回调有很多种，before-read after-read before-delete 结合需求以及代码优化 我们这里只用到了 after-read 亲测好用，之所以我们为什么没有用到 before-read 是因为该做的现在我们已经做过了，所以再用上传前的回调就重复了，有兴趣的小伙伴可以去看一下文档。

:after-read="afterRead"

afterRead(file) {
//这里需要判断一下用户是单张上传多次 还是多张单次上传
//如果是他是多张单次上传的操作的话  这边接收到的回调是一个数组类型 因此要判断它
				if(Array.isArray(file)){
				//这次真是要吐槽一下vant组件 真心没有element好用  
				//element 上传地址可以直接写到组件里 vant还要在方法里写上传的接口地址
					file.forEach((item,index)=>{
						let form = new FormData();
						form.append('file', item.file, item.file.name);
						fileUpload(form).then(res => {
							if (res.code == 0) {
								this.submitFeed.photo_list.push(res.data)
							}
						})
						return true;
					})
				}else{
					let form = new FormData();
					form.append('file', file.file, file.file.name);
					fileUpload(form).then(res => {
						if (res.code == 0) {
							this.submitFeed.photo_list.push(res.data)
						}
					})
					return true;
				}
			},

这样就可以实现图片的多张上传，不管他是怎么上传，都可以达到完美的效果。

差点忘了还有删除呢 文件删除 @delete

 @delete="filedelete"   // 在方法同样有多个回调，大家可以去测试一下

上传到这里就基本上已经完成需求了，下面贴一下完整代码吧：