dccloud/uni-app-front/pages/UploadImageExample/UploadImageExample.vue

<template>
	<view class="content">
		<g-upload ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :control='control' :columnNum="columnNum"></g-upload>


    <button type="primary"  @click="uploadFileToServe">提交</button>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: 'Hello',
				control: true,
				columnNum: 4,
				imgList: [],
				urlList:[]
				// imgList: ['/static/logo.png']
			}
		},
		onLoad() {
			/*
			mode：
			需要回填的图片数组，
			上传的时候渲染临时路径，二次进入时可以选择渲染服务返回的图片，
			此时删除图片完成后需要及时更新mode（imgList）的值
			*/
		},
		methods: {
			/*
			上传后返回的值：
			list：上传后图片数组
			v：返回当前上传图片的临时路径
			*/
			chooseFile(list, v) {
				console.log("上传图片_list：", list)
				console.log("上传图片_v：", v);
				this.urlList=list;
				console.info("urlList",this.urlList);
				//this.uploadFileToServe(v)
			},


			/*
			删除图片：
			list：删除返回删除后剩余的图片数组
			eq：返回删除的数组
			*/
			imgDelete(list, eq) {
				console.log("删除图片_list：", list);
				console.log("删除图片_eq：", eq);
				this.urlList=list;
				console.info("urlList",this.urlList);
			},


			//控件内外部切换
			switch1Change(e) {
				this.control = !this.control
			},


			//图片行个数切换
			switch2Change(e) {
				this.columnNum = this.columnNum == 3 ? '4' : '3'
			},

			/*
			执行上传服务：
			urlList：要上传的图片：数组类型
			*/
			uploadFileToServe() {
				var urlList=this.urlList;
				if (!urlList || urlList.length <= 0) {
					return
				};
				//console.info(urlList);


				//return;
				for (let i = 0; i < urlList.length; i++) {

					uni.uploadFile({
						url: '/api/Requisition/UploadImage', 
						filePath: urlList[i],
						name: 'file',
						formData: {
							createPerson:this.$store.state.user.userCode,
							masterCode:'100009'
						},
						headers: {
							'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
							//这里要把content-type设置为multipard/form-data，同时还要设置boundary
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 40rpx;
	}

	/* 上传控件 */
	.uploadControl {
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		width: 130rpx;
		display: block;
		height: 130rpx;
		text-align: center;
		line-height: 130rpx;
		font-size: 30rpx;
		color: #888;
		background-color: #EEEEEE;
	}
</style>