小程序——网络请求接口request、文件上传接口uploadFile、文件下载接口downloadFile

港控/mmm° 2021-09-04 05:30 366阅读 0赞

#### 页面 ####

<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;
        }
    }