美文网首页mpvue微信小程序开发微信小程序开发
小程序 拍照或从相册选取图片 上传到服务器

小程序 拍照或从相册选取图片 上传到服务器

作者: 可怜的小黑兔 | 来源:发表于2019-03-21 09:03 被阅读40次

html:

<button bindtap='uploadPhoto'>拍照选取照片上传</button>

js:

Page({
  uploadPhoto(e) { //  拍摄或从相册选取上传
    let that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success(res) {
        let tempFilePaths = res.tempFilePaths;// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        that.upload(that, tempFilePaths)
      }
    })
  },
  btn() {
    wx.navigateTo({
      url: '/pages/confirm/confirm'
    })
  },
  upload(page, path) { // 上传图片
    wx.showToast({
      icon: "loading",
      title: "正在上传"
    }),
    wx.uploadFile({
      url: '上传图片接口url',
      filePath: path[0],
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data",
        'session_token': wx.getStorageSync('session_token') // session_token
      },
      success(res) {
        if (res.statusCode != 200) {
          wx.showModal({
            title: '提示',
            content: '上传失败',
            showCancel: false
          })
          return;
        } 
      },
      fail(e) {
        wx.showModal({
          title: '提示',
          content: '上传失败',
          showCancel: false
        })
      },
      complete() {
        wx.hideToast(); //隐藏Toast
      }
    })
  }
})

相关文章

网友评论

    本文标题:小程序 拍照或从相册选取图片 上传到服务器

    本文链接:https://www.haomeiwen.com/subject/mnufvqtx.html