微信上传 wx.chooseMedia和wx.uploadFile使用，java springboot后端跑通

wx.chooseMedia和wx.uploadFile使用，java springboot后端跑通

前端

wxml

<button bindtap="clickImage">
	<image src="{{srcI}}"></image>
</button>
1
2
3

js

  //绑定的数据
  data: {
    srcI: ''
  },
  
// 方法chooseMedia启用手机设备的存储
clickImage(){
    wx.chooseMedia({
      count: 1,
      mediaType: ['image','video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success: res=>{
        this.setData({
          srcI:res.tempFiles[0].tempFilePath
        })
        console.log(this.data.srcI)
        console.log(res.tempFiles[0].tempFilePath)
        this.up();
      }
    })
  },
// 上传方法 ，这个name属性是最重要的属性，他对应着后端传参数的指
// 也就是 MultipartFile file 的file
  up(){
    console.log(this.data.srcI)
    wx.uploadFile({
      filePath: this.data.srcI,
      name: 'file',
      url: 'http://localhost:8200/data/uploadImage',
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Java springboot 后端

 public R uploadImage(MultipartFile file) throws IOException {
         // 获取到上传的内容 之后自己处理，我这边上传到阿里云
         // 代码没什么可参考的就不放了
        byte[] bytes = file.getBytes();
 }
1
2
3
4
5