小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序拍照或从相册选取图片上传

微信小程序拍照或从相册选取图片上传

1. WXML


拍照选取照片上传


2. JS

// pages/upload/upload.js
Page({
  data: {
    imgData: []
  },
  uploadPhoto(e) { // 拍摄或从相册选取上传
    let that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success(res) {
        let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表 
        that.upload(that, tempFilePaths);
      }
    })
  },
  upload(page, path) { // 上传图片
    wx.showToast({ icon: "loading", title: "正在上传……" });
    wx.uploadFile({
      url: '上传图片接口url', //后端接口
      filePath: path[0],
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data"
      },
      success(res) {
        if (res.statusCode != 200) {
          wx.showModal({ title: '提示', content: '上传失败', showCancel: false });
          return;
        } else{
          console.log("上传成功! 可对返回的值进行操作,比如:存入imgData;");
        }
      },
      fail(e) {
        wx.showModal({ title: '提示', content: '上传失败', showCancel: false });
      },
      complete() {
        wx.hideToast(); //隐藏Toast
      }
    })
  }
})

ps:以上是单图上传,如果需要多图上传,请看下方:

// pages/publish/publish.js
Page({
  data: {
    imgData: []
  },
  uploadPhoto(e) { // 拍摄或从相册选取上传
    let that = this;
    wx.chooseImage({
      count: 9 - that.data.imgData.length, // 默认最多上传9张
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success(res) {
        let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表 
        that.upload(that, tempFilePaths);
      }
    })
  },
  upload(page, path) { // 上传图片
    let that = this;
    wx.showToast({ icon: "loading", title: "正在上传……" });
    for (var i=0; i

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了