微信小程序开发（二）图片上传+服务端接收

最新推荐文章于 2025-08-04 16:52:51 发布

原创

最新推荐文章于 2025-08-04 16:52:51 发布 · 10w+ 阅读

123 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #图片上传 #服务器 #相册

本文介绍了微信小程序中实现图片上传的功能，包括选择图片、上传文件API的使用，并提供了PHP服务器端接收图片的代码示例，帮助开发者了解小程序图片上传的完整流程。

文/YXJ
地址：http://blog.youkuaiyun.com/sk719887916/article/details/54312573

上次介绍了小程序开发中的微信登录。文章：
微信小程序开发(一) 微信登录流程，

这次介绍下小程序当中常用的图片上传。
下篇：
微信小程序开发(三) 微信小程序授权获取用户信息openid
https://tamic.blog.youkuaiyun.com/article/details/89284104

前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。

这里写图片描述

这里的filePath就是图片的存储路径，类型居然是个String，也就是只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的php，只能自己去改接收图片的接口。

看一下页面效果图

这里写图片描述

一个很常见的修改头像效果，选择图片（拍照），然后上传。

下面就是贴代码了

###首先是小程序的wxml代码###

昵称

宝宝性别

{ {item.value}}

宝宝年龄

保存

css代码我就不贴了，一些样式而已。

###对应的JS代码 ###
var util = require(’…/…/…/utils/util.js’)
var app = getApp()
Page({
data: {
sex_items: [
{name:‘1’, value:‘小王子’},
{name:‘2’, value:‘小公主’},
{name:‘0’, value:‘尚无’}
],
logo:null,

userInfo: {}
  },

	 //事件处理函数
  bindViewTap: function() {
wx.navigateTo({
  // url: '../logs/logs'
//   url: '../load/load'
})
  },
  onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
  //更新数据
  console.log(userInfo);
  that.setData({
    userInfo:userInfo,
    logo:userInfo.logo
  })
})
  },

  bindSaveTap: function(e){
console.log(e)
var formData = {
  uid:util.getUserID(),
  user_name:e.detail.value.nick_name,
  baby_sex:e.detail.value.baby_sex,
  baby_age:e.detail.value.baby_age
}
 console.log(formData)
app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData, 
function(res){
  console.log(res);
},
function(){
})
  },  

  chooseImageTap: function(){
let _this = this;
wx.showActionSheet({
  itemList: ['从相册中选择', '拍照'],
  itemColor: "#f7982a",
  success: function(res) {
    if (!res.cancel) {
      if(res.tapIndex == 0){
        _this.chooseWxImage('album')
      }else if(res.tapIndex == 1){
        _this.chooseWxImage('camera')
      }
    }
  }
})

  },
chooseWxImage:function(type){
let _this = this;
wx.chooseImage({
  sizeType: ['original', 'compressed'],
  sourceType: [type],
  success: function (res) {
    console.log(res);
    _this.setData({
      logo: res.te