HBuiderX uni-app 多图（本地）上传

废话不多说老规矩先上图

这些图片存的相对路径在项目底下

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

后台输出效果：

到这里基本结束了 上传自己写普通的多图上传  有需要整个文件前留言