页面

<view>网络接口</view>
<button bindtap="handleTap">发送请求</button>


<view>文件下载接口</view>
<button bindtap="tapdownload">点击下载</button>

<image src="{
     
     {url}}"/>


<view>文件上传接口</view>
<view class="container">
  <button type="primary" bindtap="taphandler">点击上传</button>
</view>

JS

// pages/test/test.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    url: ""
  },
  handleTap(e) {
    
    
    wx:wx.request({
    
    
      url: 'http://localhost/helloworld',
      data: {
    
    
        x: '1',
        y: '2'
      },
      enableCache: true,
      enableHttp2: true,
      enableQuic: true,
      method: "GET",
      timeout: 0,
      success: (result) => {
    
    
        console.log("request success!");
        console.log(result.data);
      },
      fail: (res) => {
    
    
        console.log("request failed!");
        console.log(res.data);
      },
      complete: (res) => {
    
    
        console.log("request complete");
      },
    })
  },
  tapdownload(e) {
    
    
    wx.downloadFile({
    
    
      url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2573117116,2199107723&fm=26&gp=0.jpg',
      success: (res)=> {
    
    
        console.log("success " + JSON.stringify(res));
        this.setData({
    
    
          url: res.tempFilePath
        })
      },
      fail: (err)=> {
    
    
        console.log("fail " + JSON.stringify(err));
      },
      complete: (e)=> {
    
    
        console.log("complete " + JSON.stringify(e));
      }
    })
  },
  taphandler(e) {
    
    
    wx.chooseImage({
    
    
      count: 3,//最多可以选择的图片数，默认9
      sizeType: ['original', 'compressed'],//original原图， compressed压缩图，默认都有
      success: (res)=> {
    
    
        console.log("success");
        //调用文件上传
        wx.uploadFile({
    
    
          filePath: res.tempFilePaths[0],
          name: 'test',
          url: 'http://localhost/upload',
          //http请求中的额外form data
          formData: {
    
    
            name: 'tom',
            age : 18
          },
          success: (res)=>{
    
    
            console.log("upload success");
          },
          fail: (err)=>{
    
    
            console.log(err);
          },
          complete: (e)=>{
    
    
            console.log("upload complete");
          }
        })
      },
      fail: (err)=> {
    
    
        console.log("fail");
      },
      complete: (e)=> {
    
    
        console.log("complete");
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
    

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
    

  }
})

后台

@RestController
public class HelloWorldController {
    
    

    @GetMapping("/helloworld")
    public Person helloworld(String x, String y) {
    
    

        Person person = new Person();
        person.setName("tom");
        person.setId(Long.parseLong(x));
        person.setAge(Integer.parseInt(y));
        return person;
    }

    @PostMapping("/upload")
    public Person upload(@RequestParam("name") String name, @RequestParam("age")Integer age,
                         @RequestParam("test")MultipartFile test, HttpServletRequest request) {
    
    
        Person person = new Person();
        person.setName(name);
        person.setAge(age);
        //处理文件
        String originalFilename = test.getOriginalFilename();
        String path = request.getSession().getServletContext().getRealPath("upload");
        File targetFile = new File(path, originalFilename);
        if (!targetFile.exists()) {
    
    
            targetFile.mkdirs();
        }
        try {
    
    
            test.transferTo(targetFile);
        }catch (Exception e) {
    
    
            e.printStackTrace();
        }
        return person;
    }
}