uni App多图片上传,java后台接收

前台页面:

<!-- 图片上传 -->
		<wslimg title="图片上传" :num="9" :dataList="dataList" @chooseImg="chooseImg" @close="close($event)"></wslimg>
		 <view><progress :percent="percent" strock-width="10"></progress><text style="color: #00BFFF;margin-left: 48%;">{{percent}}%</text></view> 
		<view class="btn-logout" hover-class="btn-logout-hover" @tap="uploadImg()">
			<text>开始上传</text>
		</view>

<script>
	// 注册一个进度条
	var _self;
	import wslimg from '@/components/wsl-img/zw-upload-img.vue'
	export default {
		components: {
			wslimg
		},
		data() {
			return {percent: 0,
				dataList: []
         },
     methods: {
			chooseImg() {
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['compressed', 'original'],
					count: this.num - this.dataList.length,
					success: res => {
						console.log(res)
						this.dataList = this.dataList.concat(res.tempFilePaths);
						console.log(this.dataList + "=========================")
					}
				});
			},
close(e) {
				console.log(e);
				this.dataList = e;
			},
			uploadImg() {
				console.log(this.dataList + "--++---")
				console.log(this.imgURl + "addProFile" + "-----")
				let imgs = this.dataList.map((value, index) => {
					console.log("---===" + index);
					return {
						name: "image" + index,
						uri: value
					}
				})
				var uper = uni.uploadFile({
					url: this.imgURl + "addProFile",
					files: imgs,
					name: 'file',
					formData: {
						'totalNum': this.dataList.length
					},
					success: (res) => {
						console.log(res.data + "-------------");
						var result = JSON.parse(res.data);
						console.log(result.msg + "-------------");
						if (result.ret) {
							uni.showToast({
								title: result.msg,
								icon: 'success'
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: "失败",
							icon: "none"
						});
						console.log(res)
					}

				});
				// onProgressUpdate 上传对象更新的方法
				uper.onProgressUpdate(function(res) {
					// 进度条等于 上传到的进度
					_self.percent = res.progress
					console.log('上传进度' + res.progress)
					console.log('已经上传的数据长度' + res.totalBytesSent)
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
				})


			}
}

后台接收:

control:

@PostMapping(value = "/addProFile", headers = "content-type=multipart/form-data")
@ResponseBody
public  Map<String, Object> uploadFile(MultipartRequest request,Integer num){
    Map<String,Object> map = new HashMap<String,Object>();
    // 这样就可以收到文件了,files.length == 1.
    System.err.println(num+"=============================");
    List<MultipartFile> files=new ArrayList<MultipartFile>();
    for (int i=0;i<num;i++){
        System.err.println(request.getFile("image"+i)+"=============================");
   /*     System.err.println(request.getFile("image"+i)+"=============================");*/
        files.add(request.getFile("image"+i));
    }
    System.err.println(files.size()+"=============================");
    // 后续操作省略
    map.put("success", true);
    return map;
}

插件下载地址:https://download.csdn.net/download/liujucai/11961003

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值