说明

1-这篇文章主要给想知道java 后台与小程序交互学习用的

2-后端采用的时mongodb 作为一个服务器实现一个上传下载分页的 和预览图片的没有到mysql

3-gitee 前端的源码:weChatMongoDB: 小程序上传下载分页 ,java小程序的交互,小程序前端页面

4-gitee java后端的源码:mongoDBWeChat: 小程序于java后台的交互上传下载分页，后端入口

5-下面介绍的是前端与后端几种请求方式

6-先给你们看下成果图

 

 

 

1-首先在微信小程序详情那里把https 打上勾

 

 2-小程序分页的请求 前端

  getInfo: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/file/getPage',
      data: { page: that.data.page, pageSize: that.data.pageSize},
      success: function (res) {
        var contentlistTem = that.data.contentlist;  
        if (res.statusCode == 200) {
          //已有数据
          var contentlist = res.data.content;
          //总数量
          var contTotal = res.data.totalElements;
          //当前数据量
          var contPage = that.data.pageSize;
          //总数居 - 当前搜索的数据 成立
          contentlistTem.length =0;
          if(contTotal >= contPage){
           that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: true, 
          })
          }else{
            that.setData({
            contentlist: contentlistTem.concat(contentlist),
            hasMoreData:false,
          })
          }
              
        }else{
          wx.showToast({
            title: '出现异常'
          })
        }
      }

    })
  },

2-1 小程序后端接口分页

    /**
     * 查询多条数据 属于分级查询 limit 不指定就查询所有
     * skip 表示跳过行数  不指定就跳过
     *
     * @param page
     * @param pageSize
     * @return
     */
    @ResponseBody
    @GetMapping("/getPage")
    public PageImpl<files> getPage(int page, int pageSize) {
        System.out.println("查询多条数据:属于分级查询");
        //mongodb 构造器
        Query query = new Query();
        //每页五个
        Pageable pageable= PageRequest.of(page,pageSize);
        query.with(pageable);
        //按sql排序
        query.with( Sort.by(Sort.Direction.DESC,"metadDate"));
        //mongodb 查询全部数据
        Query queryCount  = new Query();
        //按sql排序
        queryCount.with( Sort.by(Sort.Direction.DESC,"_id"));
        //查询总数
        Long count =mongoTemplate.count(queryCount,files.class);
        List<files> r = mongoTemplate.find(query, files.class);
        return (PageImpl<files>) PageableExecutionUtils.getPage(r,pageable,()->count);
    }

 3- 小程序上传图片的请求方式

 loadimg: function () {
  var _this = this;
  console.log( _this.tempFiles);
  wx.uploadFile({
    url: 'http://localhost:8080/file/uploadFile', //接口
    filePath: _this.data.usernameUrl,
    name: 'file',
    success: function (res) {
      var data = res.data;
      wx.showToast({
        title: '操作成功！', // 标题
        icon: 'success',  // 图标类型，默认success
        duration: 1500  // 提示窗停留时间，默认1500ms
      })
    },
    fail: function (error) {
      wx.showToast({
        title: '操作失败！', // 标题
        icon: 'success',  // 图标类型，默认success
        duration: 1500  // 提示窗停留时间，默认1500ms
      })
      console.log(error);
    }
  })
},

 3-1 小程序java 后端的上传接口

    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public Object uploadFile(@RequestParam("file") MultipartFile file) throws IOException, ServletException {
        //文件名称
        String originalFilename = file.getOriginalFilename();
        if (originalFilename == null) {
            return "请上传文件";
        }
        //获得文件输入流
        InputStream inputStream = file.getInputStream();
        //获得文件类型
        String contentType = file.getContentType();
        //将文件存储到mongodb 中,mongodb将会返回这个文件得具体信息
        ObjectId gridFSFile = gridFsTemplate.store(inputStream, originalFilename, contentType);
        System.out.println(gridFSFile);
        return gridFSFile.toString();

    }

 4- 小程序下载 图片和附件请求方式

 wx.downloadFile({
          url: "http://localhost:8080/file/download?objectid="+id+"",
          success: function (res) {
            let path = res.tempFilePath
            const tempFilePath = res.tempFilePath;
            // 保存文件
            wx.saveFile({
              tempFilePath,
              tempFilePath: path,
              success: function (res) {
              //  let path = res.tempFilePath
                const savedFilePath = res.savedFilePath;
                var app = getApp();
                // 打开文件
                wx.openDocument({
                  filePath: savedFilePath,
                  fileType: app.globalData.fileType,
                  success: function (res) {
                    console.log('打开文档成功')
                  },
                  fail:function(e) {
                    wx.showToast({
                      title: '下载完成！', // 标题
                      icon: 'success',  // 图标类型，默认success
                      duration: 1600  // 提示窗停留时间，默认1500ms
                    })
                   // console.log("不是文件保存的地方在：C:\Users\Administrator\AppData\Local\微信开发者工具\User Data\87e84c5c2e6751b62ab5919b87cb90af\WeappSimulator\WeappFileSystem\o6zAJs7QEFfbQGfNI6hp48TRegmw\wx9ac1d45a027bafa1\store");
                  },
                }); 
              },
              fail: function (err) {
                console.log('保存失败：', err)
              }
            });
          },
          fail: function (err) {
            console.log('下载失败：', err);
          },
        })

 4-1 小程序下载和图片预览的服务接口

/**
     * 文件下载 如果是图片可以直接通过<IMG SRC = '这个方法的访问路径加上文件的id'
     * 下载直接 get 请求调用
     * 回显 需要特殊方法
     * 例如图片回显 <img src="http://127.0.0.1:8081/download?file=${ObjectId}"></img>
     * 当中的ObjectId是文件对应的图片id 路径就是访问的本地下载的页面
     *
     * @return
     */
    @RequestMapping("/download")
    public void download(String objectid, HttpServletResponse response) throws IOException {
        System.out.println("---------下传文件");
        //根据id 查询数据
        Query id = Query.query(Criteria.where("_id").is(objectid));
        GridFSFile fsFiles = gridFsTemplate.findOne(id);
        if (fsFiles == null) {
            System.out.println("没用获取到文件");
        }
        //文件名称
        String s = fsFiles.getFilename();
        //文件类型
        Document metadata = fsFiles.getMetadata();
        if (metadata == null) {
            System.out.println("\"获取文件为空\";");
        }
        String contentType = fsFiles.getMetadata().get("_contentType").toString();
        System.out.println("文件类型：" + contentType);
        //通知下载
        response.setContentType(contentType);
        response.setHeader("Content-Disposition", "attachment;filename=\"" + URLEncoder.encode(s, "UTF-8") + "\"");
        //mongdb文件操作 因为他是分片存的
        GridFSBucket gridFSBucket = GridFSBuckets.create(mongoTemplate.getDb());
        GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(fsFiles.getObjectId());
        //获取mongodb的资源
        GridFsResource gridFsResource = new GridFsResource(fsFiles, gridFSDownloadStream);
        //文件输入流
        InputStream inputStream = gridFsResource.getInputStream();
        //文件输出流
        ServletOutputStream outputStream = response.getOutputStream();
        //拷贝流
        IOUtils.copy(inputStream, outputStream);
        //关流
        outputStream.flush();
        outputStream.close();
        inputStream.close();
        System.out.println("-------下载完成------------");
    }