upload上传图片之上传多张图片和上传一张图片

• 前言
• 上传仅能上传一张和上传多张的区别不仅仅在于数量，还在于存放上传图片地址的变量。存放一张的变量是字符类型。多张是数组类型。

上传一张图片

----------------------参数-----------------------
action-----------：图片上传地址
header----------：上传携带的头信息，对象形式
max-count-----：上传的最大数量
file-list-----------：默认显示的图片列表，数组元素为对象，必须提供url属性
multiple---------：是否开启图片多选，部分安卓机型不支持。布尔类型
-----------------------事件-----------------------
on-success----：上传成功时出发的方法
on-remove-----：移除图片时触发

以上参数是upload参数仅本人写时应用到，如有需要请参考官方文档
以下是：基本样式代码

<u-upload :action="uploadUrl" :header="header" @on-success="success" @on-remove="remove" max-count="1" :file-list="fileList" :multiple="false" class="mt-5"></u-upload>
<u-button type="primary" class="mt-2"  style="height: 80rpx;" @click="addVipOrder">马上升级</u-button>

所用到的参数

uploadUrl: config.baseUrl + '/api/upload',	// 图片上传请求方法   上传地址
header: { 	//请求头
	Authorization: `Bearer ${this.$store.state.user.token}`
},
fileList:[],//存放图片集合
//发送提交表单请求的时候会用到form参数，下面稍微提到一下。
form: {	
	type: '',
	money: '',
	payType: '',
	evidence: ''
}

调用到的success方法和remove方法 以及提交表单方法

// 上传成功
success(res, index) {
	//将成功后的上传地址赋值给evidence，方便后续的移除图片
	this.form.evidence = res.data.url
},
// 移除成功
async remove(index) {
	//将上传图片地址赋值给data，便于记住
	const data = this.form.evidence;
	//再将data数据赋值给fileUrl作为移除方法的参数
	const info = {
		fileUrl: data
	};
	//传递info参数，请求方法
	const res = await this.$http.post('/api/unload/user', info);
	uni.showToast({
		title: res.msg,
		icon: 'none'
	});
	//如果移除请求失败，则停止后续操作
	if (res.code !== 0) {
		return;
	}
	//移除请求成功后，将本地的图片地址清空
	this.form.evidence = ''
},
//提交表单
async addVipOrder() {
	//把上面提到的请求参数赋值给data
	const data = this.form
	if(!data.type) {
		return this.showToast('购买类型不存在')
	}
	if(!data.money) {
		return this.showToast('购买金额不存在')
	}
	if(data.payType != 3) {
		// console.log(data.payType);
		return this.showToast('支付方式不对')
	}
	if(!data.evidence) {
		return this.showToast('必须上传凭证')
	}
	//这里发起请求，并传递参数
	const res = await this.$http.post('/api/vipOrder', data)
	if (res.code !== 0) {
		this.showToast(res.msg)
		return;
	}
	this.showToast('提交成功，请耐心等待审核')
	setTimeout(()=>{
		uni.reLaunch({
			url: '../index/index'
		})
	},3000)
}

上传多张图片

• 上传多张图片在我整理的时候，又发现了疑问，我先把代码搞上来，后续在对其注释进行补充

---------------------------参数-----------------------------
// 请求头
header: {
Authorization: Bearer ${this.$store.state.user.token}
},
fileList: [], //图片列表
// 上传列表
allFileList: [],
//上传地址
uploadUrl: config.baseUrl + ‘/api/upload’,
formList: [],

// 上传成功
success(res, index) {
	let fileList = this.fileList
	fileList[index] = res.data;
	this.allFileList[this.upIndex] = fileList;
	
	let newList = [];
	if (fileList.length > 0) {
		fileList.forEach(val => {
			newList.push(val.url);
		});
		this.orderList[this.upIndex].evidence = newList.join('_');
	}
},
// 移除成功
async remove(index) {
	
	const data = this.fileList[index];
	const info = {
		fileUrl: data.url
	};
	const res = await this.$http.post('/api/unload/user', info);
	uni.showToast({
		title: res.msg,
		icon: 'none'
	});
	if (res.code !== 0) {
		return;
	}
	this.fileList.forEach((val, i) =>{
		if(i === index) {
			delete this.fileList[i]
		}
	});
	let newList = []
	this.allFileList[this.upIndex] = this.fileList;
	if(this.fileList.length > 0) {
		this.fileList.forEach(val => {
			newList.push(val.url);
		});
		this.orderList[this.upIndex].evidence = newList.join('_');
	}
},
async submit() {
	//传递积分价值和照片凭证
	if (this.isBtn) {
		return;
	}
	const orders = this.orderList
	if (orders.length < 1) {
		return this.showToast('没有产品')
	}
	this.isBtn = true;
	let newList = []
	for (let i = 0; i < orders.length; i++) {
		const order = orders[i]
		if(!order.id) {
			this.isBtn = false;
			return this.showToast('缺乏参数')
		}
		if(!order.evidence) {
			this.addVoucher(i)
			this.isBtn = false;
			return this.showToast(`请上传${order.name}凭证`)
		}
		if(order.showNum < 1) {
			this.isBtn = false;
			return this.showToast('产品数量出错')
		}
		let remark = ''
		if (order.remark) {
			remark = order.remark
		}
		const data = {
			name: order.name,
			norm: order.norm,
			showNum: order.showNum,
			goodsId: order.id,
			integralNum: order.showNum * order.norm || 0,
			evidence: order.evidence,
			remark: order.remark,
		};
		newList.push(data)
	}
	this.upIndex = 0
	this.formList = [...newList]
	for(let j = 0; j < this.formList.length; j++) {
		const data = this.formList[j]
		const res = await this.$http.post('/api/order', data);
		if (res.code !== 0) {
			this.isBtn = false;
			return this.showToast(res.msg);
		}
		newList.splice(0, 1);
		if(newList.length > 0) {
			this.orderList = [...newList]
		}
	}
	this.showToast("报单成功")
	setTimeout(() =>{
		uni.reLaunch({
			url:'../allOrder/allOrder'
		});
	},2000)
},