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(); }