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

Dear 丶 2023-05-30 06:05 34阅读 0赞

前台页面：

<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][https_download.csdn.net_download_liujucai_11961003]

[https_download.csdn.net_download_liujucai_11961003]: https://download.csdn.net/download/liujucai/11961003