微信小程序wx.uploadFile将本地或者拍照的图片上传到后端

待我称王封你为后i 2023-01-12 15:57 2078阅读 0赞

### 微信小程序wx.uploadFile将本地或者拍照的图片上传到后端 ###

*   *   *   *  官方调用例子
             *  各参数的说明
             *  后端springboot的接收例子
             *  注意事项

在一些应用场景，我们需要将微信拍照或者微信相册中的照片上传到后端去接收，这里就要用到  
wx.uploadFile()这个api了  
具体请看  
`https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html`

#### 官方调用例子 ####

wx.chooseImage({ 
      success (res) { 
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({ 
          url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],                  //要传的图片路径
          name: 'file',                                //获取图片二进制文件的key
          formData: {                                   //其他需要携带的参数
            'user': 'test'
          },
          success (res){ 
            const data = res.data
            //do something
          }
        })
      }
    })

#### 各参数的说明 ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>开发者服务器地址（必）</td> 
  </tr> 
  <tr> 
   <td>filePath</td> 
   <td>要上传文件资源的路径 (本地路径)（必）</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容（必）</td> 
  </tr> 
  <tr> 
   <td>formData</td> 
   <td>HTTP 请求中其他额外的 form data（选）</td> 
  </tr> 
 </tbody> 
</table>

#### 后端springboot的接收例子 ####

@RestController
    @RequestMapping("/api")
    public class ApiController { 
        @RequestMapping("/sampleSearch")        //要使用 MultipartFile 类型的参数 file 接收
        public String sampleSearch(MultipartFile file) throws IOException { 
            return PictureSimilarity.sampleSearch(file.getBytes());
        }
    }

#### 注意事项 ####

在实际应用过程遇到了一些问题，接收执行了 wx.uploadFile 方法，但是却没有发送请求，这就让我很奇怪。在一番尝试后，发现wx.chooseImage调用成功res.tempFilePaths是一个数组，就算你只选了一个图片也还是一个数组，而我就是因为 wx.uploadFile的filePath直接用了wx.chooseImage返回的一个数组作为参数，而它要的是一个String，所以请求不出去。解决办法就是如例子所示，`filePath: tempFilePaths[0]`加个\[0\]，问题解决！（搞了大半天居然是一个那么细节的问题）