vue项目使用vant上传图片到七牛

1）创建头像上传组件

afterRead(file){
                let url=this.$config.uploadHostUrl + this.$utils.getLocalItem('token');//获得七牛上传图片的地址和token
                let formData = new FormData();
                //如果上传的数组
                if(file instanceof  Array){
                    for(let i=0;i<file.length;i++){
                        formData.append('file'+i,file[i].file)
                    }
                }else{
                    formData.append('file',file.file);//必须是file.file，不然会报错
                }
                //添加额外的参数
                formData.append('x:type',this.$config.doc.headCover);
                formData.append('x:owner',this.userInfo.owner);
                formData.append('x:creator',this.userInfo.id);
                formData.append('x:target',this.userInfo.id);
                //添加请求头
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                this.$axios.post(url,formData,config).then(res=>{
                   if(res.data.code===0){
                       this.refreshHandle();
                       this.$toast({
                           message:'头像上传成功!'
                       })
                   }
                })
            },

以上方法可以用于单张图片上传，但是如果是多张，就会出现

这种情况，没有办法识别图片的id;所以要弄一个数组，存储起来，再遍历数组，同时使用formData.set方法，不然不起作用；
所以重新封装可以为

afterRead(files){
	let url =this.$config.uploadHostUrl + this.$utils.getLocalItem('token');//这个上传的路径和调用接口获得的token值；
	let formData = new FormData();
	//需要的额外参数,根据后端或许传入的值不同
	formData.append('x:type',‘上传图片的类型’);
	formData.append('x:owner','');
	formData.append('x:creator':'');
	formData.append('x:target',' ');
	let config ={
		headers:{'Content-Type':'multipart/form-data'}
	}
	let imgList=[];//定义存储file的数组
	//判断files的类型
	if(files instanceof Array){
		for(let i=0;i<files.length;i++){
			imgList = [...imgList,files[i].file]
		}
	}else{
		imgList =[...imgList,files.file]
	}
	//遍历数组
	for(let i=0;i<imgList.length;i++){
		formData.set('file',imgList[i]);//这里要用set,如果用append，还是会出现一起上传的情况
		this.$axios.post(url,formData,config).then(res=>{
				
		})
	}
}

完美解决!