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();
}
转载：https://blog.csdn.net/MacWx/article/details/113260550
查看评论