uniapp多图片上传、预览，java后台接收

心已赠人 2023-01-12 01:59 220阅读 0赞

**UniApp前台页面：**

<template>
    	<view class="feedback-title"><text>选择图片</text></view>
    		<view class="feedback-body feedback-uploader">
    			<view class="uni-uploader">
    				<view class="uni-uploader-head">
    					<view class="uni-uploader-title">点击预览图片</view>
    					<view class="uni-uploader-info">{
       { imageList.length }}/5</view>
    				</view>
    				<view class="uni-uploader-body">
    					<view class="uni-uploader__files">
    						<block v-for="(image, index) in imageList" :key="index">
    							<view class="uni-uploader__file" style="position: relative;">
    								<image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
    								<view class="close-view" @click="close(index)">x</view>
    							</view>
    						</block>
    						<view class="uni-uploader__input-box" v-show="imageList.length < 5">
    							<view class="uni-uploader__input" @tap="chooseImg"></view>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<button type="default" class="feedback-submit" @tap="send">提交</button>
    	</view>
    </template>
    
    <script> export default { data() { return { imageList: [], sendDate: { score: 0, content: '', concat: '', num: 0 }, imgurl: [], }; }, onLoad() { }, methods: { /** * 关闭图片 * @param {Object} e */ close(e) { this.imageList.splice(e, 1); }, /** * 选择图片 */ chooseImg() { //选择图片 uni.chooseImage({ sourceType: ['camera', 'album'], sizeType: 'compressed', count: 5 - this.imageList.length, success: res => { // console.log(res.tempFilePaths) // this.imageList = this.imageList.concat(res.tempFilePaths[0]); this.imageList = res.tempFilePaths; this.imgurl = this.imageList.map((value, index) => { return { name: 'images' + index, uri: value }; }); console.log(this.imgurl) } }); }, /** * 预览图片 * @param {Object} index */ previewImage(index) { uni.previewImage({ urls: this.imageList, current: this.imageList[index] }); }, /** * 提交 */ send() { this.sendDate.num = this.imgurl.length uni.uploadFile({ url: 'http://localhost:8080/app/back/addBack', //仅为示例，非真实的接口地址 files: this.imgurl, formData: this.sendDate, success: (res) => { if (typeof res.data === 'string') { res.data = JSON.parse(res.data); } if (res.data.code === 200) { uni.showModal({ content: '提交成功', showCancel: false }); this.imageList = []; } else { uni.showModal({ content: '提交失败', showCancel: false }); } } }); } } }; </script>

**java后台Controller：**

@RequestMapping("/addBack")
        public FebsResponse addBack( MultipartRequest request, Integer num) { 
          
            String url= "";
            //获取上传的图片
            List<MultipartFile> files = new ArrayList<>();
            if (num > 0) { 
                for (int i = 0; i < num; i++) { 
                    files.add(request.getFile("images" + i));
                }
                for (MultipartFile file : files) { 
                    if (file != null && file.getSize() > 0) { 
                        String basePath = "picture";
                        try { 
                            url += aliOSSUpload(file, basePath)+"@";
                            System.out.println("url：" + url);
                        } catch (IOException e) { 
                            e.printStackTrace();
                            return new FebsResponse().fail().message("图片上传失败！");
                        }
                    }
                }
            }
            if (StringUtils.isNotBlank(url)){ 
                url = url.substring(0, url.length() -1);
            }
            
            return new R().success();
        }