微信小程序上传图片单张

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‘);

 

微信小程序上传图片单张