微信小程序上传图片单张

Posted 2020-11-18 他的她

wxml代码

<view>
<image src=‘{{source}}‘ bindtap="uploadimg" style=‘width:200rpx;height:200rpx;background:red;‘>点击选择上传图</image>
</view>

js代码

var app = getApp()
Page({
  /**
  * 页面的初始数据
  */
  data: {　　//初始化为空
    source: ‘‘
  },
  /**
   * 上传图片
   */
  uploadimg: function () {
    var that = this;
    wx.chooseImage({ //从本地相册选择图片或使用相机拍照
      count: 1, // 默认9
      sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        //console.log(res)
        //前台显示
        that.setData({
          source: res.tempFilePaths
        })
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: ‘上传地址‘,

          filePath: tempFilePaths[0],
          name: ‘file‘,

          success: function (res) {
            //打印
            console.log(res.data)
          }
        })

      }
    })
  },
  onLoad: function () {

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

后台获取php

$file = request()->file(‘file‘);