小程序与springboot结合上传删除、预览图片

小程序前端

wxml:

	<view class="item" bindtap="" style="border:none;padding-bottom:0" wx:if="{{srcbasset.image}}">
		资产图片
	</view>
	<view class="item" bindtap="" style="border-bottom: 15px solid #f3f3f3;" wx:if="{{srcbasset.image}}">
		<view class="group-body">
			<view class="img-upload">
				<view class="img-item img-item-item">
					<image src="{{_server}}{{srcbasset.image}}" mode="aspectFit" bindtap='showImg' style="width:120rpx;height:120rpx;"></image>
				</view>
			</view>
		</view>
	</view>

	<view class="item" bindtap="" style="border-bottom: 15px solid #f3f3f3;">
		<view class="btn" bindtap='chooseImg'>资产图片上传+</view>
		<view class="btn" bindtap='deleteImg' wx:if="{{srcbasset.image}}" style="background:#ffc107;">删除</view>
	</view>

 

js

//展示图片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: [that.data._server + that.data.srcbasset.image],
      current: that.data._server + that.data.srcbasset.image
    })
  },
  deleteImg: function (e) {
    let that = this;
    const params = {
      id: that.data.srcbasset.id
    }
    request.GET('miniapp/deleteImg', params, function (res) {
      if (res.data && res.data.code === 0) {
        wx.hideToast();
        var a='srcbasset.image';
        that.setData({
          [a]:''
        });
      } else {
        wx.hideToast();
      }
    }, function (res) {
      wx.hideToast();
    });
  },
  chooseImg: function (e) {
    let that = this;
    let id=this.data.srcbasset.id;
    wx.chooseImage({
      count: 9,
      sizeType: [],
      sourceType: ['album', 'camera'],
      success: function (res) {
        let tempFilePaths = res.tempFilePaths;
        for (let i = 0; i < tempFilePaths.length; i++) {
          wx.uploadFile({
            url: that.data._server + 'miniapp/uploadImage',
            filePath: tempFilePaths[i],
            name: 'file',
            header: { 
              'Content-Type': 'multipart/form-data',
              'Cookie': 'JSESSIONID=' + app.cache.access_token
            },
            formData: {
              id:id
            },
            success: function (res) {
              wx.hideLoading();
              var a='srcbasset.image';
              that.setData({
                [a]: JSON.parse(res.data).msg
              });
            }
          });
          wx.showLoading({
            title: '正在上传...',
          })
        }
      },
      fail: function (res) {
        console.log(res, '失败');
      },
      complete: function (res) { },
    });
  }

 

Springboot后台

    /**
     * 非IT上传图片
     */
    @PostMapping("/uploadImage")
    @ResponseBody
    public AjaxResult uploadImage(@RequestParam("id") Long id,MultipartFile file)throws IOException {
        if (!file.isEmpty()) {
            String image = FileUploadUtils.upload(RuoYiConfig.getSrcbItassetPath(),file);
            SrcbAssetinfo srcbAssetinfo=new SrcbAssetinfo();
            srcbAssetinfo.setId(id);
            srcbAssetinfo.setImage(image);
            srcbAssetinfoService.updateSrcbAssetinfo(srcbAssetinfo);
            System.out.println(image);
            return AjaxResult.success(image);
        }else{
            return AjaxResult.success("上传图片不存在!");
        }
    }


    /**
     * 删除非IT上传图片
     */
    @GetMapping("/deleteImg")
    @ResponseBody
    public AjaxResult deleteImg(@RequestParam("id") Long id) {
        SrcbAssetinfo srcbAssetinfo=srcbAssetinfoService.selectSrcbAssetinfoById(id);
        SrcbAssetinfo srcbAssetinfo2=new SrcbAssetinfo();
        srcbAssetinfo2.setId(srcbAssetinfo.getId());
        srcbAssetinfo2.setImage("");
        return AjaxResult.success( srcbAssetinfoService.updateSrcbAssetinfo(srcbAssetinfo2));
    }