微信小程序上传文件到java服务器,有完整代码,保姆级,直接复制可用

微信小程序项目需要用户选择文件上传文件到服务器,折腾了好大一会,参考了网上的代码,并略微修改,方便自己,也方便别人,记录下来

1.微信小程序代码

.wxml

  <view class="usermotto">
    <text class="user-motto" bindtap="saveFile">{{motto}}</text>
  </view>

.js

saveFile() {
    wx.chooseMedia({
      count: 1, // 可选文件数量。因为是头像上传，只一个文件就可
      mediaType: ["image"], // 文件类型：这里只是图片，其他使用看官网
      success: res => {
        this.uploadFile(res.tempFiles[0]); // 返回的数据里有我们后面上传需要的文件，保存下来
      },
      fail: err => {
        console.log(err, "personal.js >>>> 个人资料 上传头像")
      }
    })
  },
  uploadFile(file) {
      //console.log(file.tempFilePath);
    wx.uploadFile({
      filePath: file.tempFilePath, // 上一步操作中带过来的文件
      name: 'file', // 接口中要求的formData类型数据的参数
      url: 'http://localhost:8080/handle-video/common/uploadFile', // 接口
      formData: { // 其他数据类型的参数
        code: '',
        type: ''
      },
      success: res => {
        console.log(res,'上传成功');
      },
      fail: err => {
        console.log(err, 'personal.js >>>> 个人资料')
      }
    })

2.java代码

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/handle-video/common")
public class CommonController {


    @RequestMapping("/uploadFile")
    public String uploaddFie(MultipartFile file){

        return file.getOriginalFilename();

    }
}

参考文档1:微信上传 wx.chooseMedia和wx.uploadFile使用，java springboot后端跑通_老饼干的博客-CSDN博客

参考文档2:https://www.jianshu.com/p/49227427d145