微信小程序图片上传java后台

js代码：

chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        // console.log(tempFilePaths + '----');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
          console.log("---->   "+tempFilePaths[i])
          wx.uploadFile({
            url: 'http://localhost:8088/bluewind/storeAll/upload',
            filePath: tempFilePaths[i],
            name: "file",
            header: {
              "content-type": "multipart/form-data"
            },
            success: function (res) {
              console.log("res"+res.data);
              if (res.status == 0) {
                wx.showToast({
                  title: "上传成功",
                  icon: "none",
                  duration: 1500
                })
                // that.data.imgs.push(JSON.parse(res.data).data)
                that.setData({
                  imgs: that.data.imgs
                })
              }
            },
            fail: function (err) {
              wx.showToast({
                title: "上传失败",
                icon: "none",
                duration: 2000
              })
            },
            complete: function (result) {
              console.log(result.errMsg)
            }
          })
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs
        });
      }
    });
  },
  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },

css代码：

.img{
  display: inline-block;
}
 
.pic {
  width: 215rpx;
  height: 215rpx;
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}
 
.delete-btn{
  position: absolute;
  top: 0;
  right: 0;
}
 
.weui-uploader{
  padding: 10rpx;
}
 
 
.lineHeight {
  width: 100%;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
  font-size: 30rpx;
}
.container {
  padding: 0;
  align-items: left;
  padding-left: 15rpx;
}
.numberInfo {
  font-size: 24rpx;
  text-indent: 15rpx;
  border-bottom: 1px solid #ccc;
}
 
/* .input {
  display: inline-block;
  border: 1px solid #ccc;
  line-height: 80rpx;
  vertical-align: middle;
  margin-left: 11%;
  width: 75%;
} */
.input,
.input-7 ,
.input-15{
  margin-left: 7%;
  display: inline-block;
  /* border: 1px solid #ccc; */
  line-height: 80rpx;
  vertical-align: middle;
  width: 75%;
}
.input{
  margin-left: 11%;
}
 
button {
  width: 100%;
  margin-top: 30rpx;
}
.select{
  margin-left: 7%;
  color: #666;
}
 
.input-15{
  margin-left:15%;
}

html：

<view class="weui-uploader">
  <view class="img-v weui-uploader__bd">
    
    <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
        <image class='weui-uploader__img'
                src="{{item}}"
                data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
                  <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
        </image>
    </view>
     
      <!-- 用来提示用户上传图片 -->
      <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
  </view>

java后台：

 @PostMapping("/upload")
    public ResultDto upload(@RequestParam(value = "file", required = false)MultipartFile file){
        System.out.println("进来了上传图片接口");
        System.out.println(file);
        String msg = "";
        if (file.isEmpty()) {
            System.out.println("文化上传失败!");
            msg="文化上传失败!";
            return ResultDto.error(2,msg);
        }else {
            System.out.println("文化上传成功!");
            // 拿到文件名
            String filename = file.getOriginalFilename();
            System.out.println("0"+filename);//获取图片的文件名
            // 存放上传图片的文件夹
            File fileDir = UploadUtils.getImgDirFile();
            // 输出文件夹绝对路径  -- 这里的绝对路径是相当于当前项目的路径而不是“容器”路径
            //  System.out.println(fileDir.getAbsolutePath());

            try {
                // 构建真实的文件路径
                File newFile = new File(fileDir.getAbsolutePath() + File.separator + filename);
                // 上传图片到 -》 “绝对路径”
                file.transferTo(newFile);
                msg = "上传成功!";
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return ResultDto.build(0,msg,1);
    }



    static class UploadUtils{
        // 项目根路径下的目录  -- SpringBoot static 目录相当于是根路径下（SpringBoot 默认）
        public final static String IMG_PATH_PREFIX = "static/img_upload";

        public static File getImgDirFile(){

            // 构建上传文件的存放 "文件夹" 路径
            String fileDirPath = new String("src/main/resources/" + IMG_PATH_PREFIX);
            File fileDir = new File(fileDirPath);
            if(!fileDir.exists()){
                // 递归生成文件夹
                fileDir.mkdirs();
            }
            return fileDir;
        }
    }

效果展示

图片代码上传参见：https://www.cnblogs.com/m1754171640/p/10525826.html
活到老，学到老