微信小程序上传图片

小程序上传图片

首先 是wxml的代码

  <form bindsubmit="formSubmit" bindreset="formReset">
    <view">
      照片上传:
      <view class="picture" > <image bindtap="btnUpimg" class="picture_image"name="photos"  src="{{imageSrc}}"></image> </view>
    </view>
      <button class="save" form-type="submit">保存</button>
  </form>

**然后 ** .wxss样式

.picture{
  width: 106rpx;
  height: 106rpx;
  margin-left: 40rpx;
}
.picture_image{
  width: 106rpx;
  height: 106rpx;
}

最后 .js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageSrc:'/images/backStage_photos.png',
  },


  /**上传 */
  btnUpimg: function () {
    var that = this;
    wx.chooseImage({
      count: 1, //次数是限制上传数量，默认是九张
      sourceType: ['album', 'camera'],
      sizeType: ['original', 'compressed'],
      success: function (res) {
        console.log(res)
        console.log(res.tempFilePaths)
        that.setData({
          imageSrc: res.tempFilePaths[0]
        })
      }
    })
  },


  formSubmit: function (e) {
    let that = this;
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    if (that.data.imageSrc== '/images/backStage_photos.png') {
          that.saveTeacher();
          wx.showToast({
	          title: '没有上传图片哦！！',
    	      icon: 'none',
        	  duration: 2000
  	      })
     } else {
         that.upImgs(that.data.imageSrc);
      }
  },


  upImgs: function (imgurl) {
    var that = this;
    let dataList = { };
    console.log(imgurl)
    console.log(dataList)
    wx.uploadFile({
      url: 'https://**',//上传图片的请求接口
      filePath: imgurl,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'
      },
      formData: dataList,  //只上传图片可不传，此处是上传其他参数的
      success: function (res) {
        console.log(res)
        console.log(JSON.parse(res.data))
        wx.showToast({
          title: JSON.parse(res.data).msg,
          icon: 'success',
          duration: 3000
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

})