廢話不多說老規矩先上圖
這些圖片存的相對路徑在項目底下
uni-app 多圖上傳跟普通的form表單上傳還是有點區別 小程序不支持多圖上傳
上代碼：前端代碼跟效果圖
先看效果圖：
這裏是整個圖片不是有背景色注意，這裏有功能有刪除，放大，監聽上傳圖片數量
前端代碼：表單
<view class="li">
<view class="form_l">上傳法人身份證：{{imageList2.length}}/2</view>
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList2" :key="index">
<view class="deleteImage"><image src="/static/icon/delete1.png" class="delete" @tap="delect(index,2)"></image></view>
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage2"></image>
</view>
</block>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage(2)"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
js:
export default {
data() {
return {
imageList2: [],//這個是上傳圖片的集合
count2:2,//這個是限制上傳圖片的個數
}
}，
method：{
// 選擇圖片
chooseImage: function(count) {
let number=0;
if(count==2){ //這裏加判斷是我有多個上傳事件
if(this.imageList2.length===2){
return;
}
//這個是監聽選擇圖片的個數
number= this.imageList2.length+this.count2>this.count2?this.count2-this.imageList2.length : this.count2
}
uni.chooseImage({
sizeType: ['compressed'],
sourceType: ['album'],
count:number,
success: (res) => {
if(count==2){
this.imageList2 = this.imageList2.concat(res.tempFilePaths);
}
}
})
},
//移除圖片
delect(index,count){
uni.showModal({
title: '提示',
content: '是否刪除該圖片？',
success: (res) =>{
if (res.confirm) {
if(count==2){
this.imageList2.splice(index, 1)
}
}
}
})
},
//預覽圖片也就是圖片放大效果
previewImage2: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList2
})
},
}
//這裏是上傳操作 很關鍵
submit(){
array2=this.imageList2;//這是上傳圖片的集合
let imgArray2 = array2.map((value, index) => {
return {
name: "image" + index,//圖片的下標元素
uri: value
}
})
uni.uploadFile({
url: url+"/CompanyController/upload?c_id="+this.c_id+"&type=3",//附帶參數根據自己的需求
files: imgArray2, //必須制定files 規定
name: 'file',
formData: {
'totalNum': array2.length //圖片個數
},
success: (res) => {
let result = JSON.parse(res.data);
}
})
}
},
fail: (res) => {
this.$showToast.showToast("操作失敗","none")
}
})
}
}
前端代碼基本結束了，接下來看後臺（java）
@RequestMapping(value = "upload",headers = "content-type=multipart/form-data")
//headers = "content-type=multipart/form-data" 必須加 使用MultipartRequest 接收iamge
public @ResponseBody Map<String,Object> upload(MultipartRequest request,HttpServletRequest req,int totalNum)throws Exception{
if(totalNum()>0){
List<MultipartFile> files=new ArrayList<MultipartFile>();
for(int i=0;i<totalNum();i++){
files.add(request.getFile("image"+i));
}
}else{
map.put("code","imageIsNull");
}
return map;
}
後臺輸出效果：
到這裏基本結束了 上傳自己寫普通的多圖上傳 有需要整個文件前留言