WEB应用开发综合实训day15

本节实训内容为微信小程序向后端上传图片和from表单，以及歌单功能。

• 歌单头像上传

  /**
     * 上传歌单图片
  */
  takePhoto:function(){
      var that = this
      wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
              // tempFilePath可以作为img标签的src属性显示图片
              const tempFilePaths = res.tempFilePaths;
              //上传到后台
              wx.uploadFile({
                  filePath: tempFilePaths[0],//上传文件的临时路径
                  name: 'file',//跟后端MultipartFile的参数名一致
                  url: that.data.baseUrl+"wx/playlist/upload",
                  success:function(res){
                      //将字符串解析为json格式
                      var data = JSON.parse(res.data)
                      //将上传之后的图片路径赋值给playSrc
                      that.setData({
                          playSrc:JSON.parse(res.data).data
                      })
                  }
              })
          }
      })
  },
  

• 表单提交

  /**
     * 表单提交
     */
  formSubmit:function(e){
      var postData = e.detail.value
          //因为postData没有图片路径属性，可以给他添加这个属性和值
          postData['plPath'] = this.data.playSrc;
      //后端传参
      wx.request({
          url: this.data.baseUrl+'wx/playlist/add',
          method:"post",
          data:postData,
          success:function(res){
              wx.showToast({
                  title: '创建成功',
                  icon: 'success',
                  duration: 2000,
                  success:function(){
                      //跳转到歌单列表页面
                      wx.navigateBack({
                          url: '/pages/playlist/playlist',
                      })
                  }
              })
          }
      })
  },
  

  /**
       * 添加歌单
       * @RequestBody:使用实体类对象接收前端提交的json对象，必须加此注解
  */
  @RequestMapping("/add")
  public ResultVo add(@RequestBody TbPlaylist playlist){
      System.out.println(playlist);
      return playListService.add(playlist);
  }
  

• 歌曲收藏

  /**
     * 收藏歌单
     */
  collectSong:function(e){
      var plId = e.currentTarget.dataset.id
      var mId = this.data.song.mId;
      var that = this;
      wx.request({
          url: this.data.baseUrl+'wx/playlist/fav',
          data:{
              plId:plId,
              mId:mId
          },
          method:"post",
          success:function(res){
              wx.showToast({
                  title: '收藏成功',
                  success:function(res){
                      that.setData({
                          display:'none'
                      })
                  }
              })
          }
      })
  },
  

  /**
       * 收藏歌曲
  */
  @RequestMapping("/fav")
  public ResultVo fav(@RequestBody TbMusicPlaylist musicPlaylist){
      return playListService.collectMusic(musicPlaylist);
  }