一、展示效果

二、只写下核心的代码,样式自己弄下就好了。点击图片调用 add_img方法()

// 点击调用手机相册/拍照
  add_img: function (type) {
    let that = this;
    wx.chooseImage({
      count: 1,//一张图片
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],//手机拍照/图片
      success: function (res) {
        let src = res.tempFilePaths[0];
        let local_img = src;  //本地选择图片地址(可以用来展示,后面上传服务器成功再替换成服务器图片路径,不替换也行,避免参数相同即可)
          that.setData({
            local_img:src 
          });
          that.uploadFile(src);
        }
        
      },
      fail: function () {
        wx.showToast({
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },
  uploadFile(src){  //将图片上传到服务器
    let _this = this;
    let filePath = src;
    wx.uploadFile({
      url: api.Upload_Desc_Img,
      filePath: filePath,
      formData: null,
      name: 'file',
      header: {
        'X-Requested-With': 'XMLHttpRequest',
        'Authorization': wx.getStorageSync('token'),//根据后台需要参数
        'Appid': wx.getStorageSync('appid')//根据后台需要参数
      },
      success: (res => {
        let data = JSON.parse(res.data);
        if (data.code === 200) {
            let ftp_save_file_path = data.data.img_url;//服务器返回图片地址
            _this.setData({
              local_img:ftp_save_file_path ,
            })
        }
      })
    })
    return false;
  },

只介绍图片上传的方法,视频上传的方法和图片上传的方法类似,就不一一说明啦,不懂的话可以私聊我。

更多推荐