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

下面就是贴代码了

首先是小程序的wxml代码

 昵称    宝宝性别          {{item.value}}      宝宝年龄     保存

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

对应的JS代码

引入了名为util的模块，该模块是通过require函数从路径../../../utils/util.js中加载的。 var app = getApp() Page({  data: { sex_items: [ 该对象的名称为“1”，其对应的值为“小王子”。 该条目编号为2，其内容指的是“小公主”。 该对象的名称为“0”，其数值显示为“尚未有”。 ], logo:null, userInfo: {}  },  //事件处理函数  bindViewTap: function() { wx.navigateTo({ 将文件路径设定为“../logs/logs”。 该链接指向的路径为'../load/load'。 })  },  onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 执行app.getUserInfo()函数，并在回调函数中处理用户信息：userInfo。  //更新数据  console.log(userInfo);  that.setData({  userInfo:userInfo,  logo:userInfo.logo  }) })  },  bindSaveTap: function(e){ console.log(e) var formData = {  uid:util.getUserID(), 用户名称：e详情值中的昵称， 婴儿性别：e.detail.value中所记录的婴儿性别信息。 宝宝年龄：e详情值中的婴儿年龄 }  console.log(formData) app.apiFunc执行上传文件操作，目标API为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){ 此操作将触发选择微信相册图片的功能。  }else if(res.tapIndex == 1){ 此操作将调用选择微信图片的功能，并指定使用相机模式。  }  }  } })  }, chooseWxImage:function(type){ let _this = this; wx.chooseImage({ 尺寸类型包括：原始尺寸、压缩尺寸。  sourceType: [type],  success: function (res) {  console.log(res);  _this.setData({  logo: res.tempFilePaths[0],  })  }  })  } })

主要讲解一下JS代码

1、方法

该弹窗用于展示选择图片及拍照的选项，其中运用了微信页面交互的API接口，如需了解具体使用方法，请点击查看详情。

显示操作菜单

2、方法

该功能主要服务于图片的选择和路径回调信息的接收，通过点击可以深入了解其具体的使用方法。

从本地相册选择图片或使用相机拍照

3、上传

在方法的回调函数中，我发现我已将获取到的图片资源路径res直接赋值给了logo变量。这样一来，我们只需调用相关方法即可，而微信的相关操作已被我封装成新的函数形式。

方法

//上传文件 定义一个函数，用于上传文件，该函数接受以下参数：目标URL、文件路径、文件名、表单数据、成功回调函数和失败回调函数。 在控制台输出字符串，内容为"a="后接filePath的值。 wx.uploadFile({  url: rootUrl + url,  filePath:filePath,  name:name,  header: { 该字段名为'content-type'，其值设定为'multipart/form-data'。  }, // 设置请求的 header formData:formData,//HTTP请求携带的其他附加表单数据  success: function(res){  console.log(res); 若响应状态码为200，但res.data中的result_code属性不存在或其值不为真。 判断success是否为函数类型，如果是，则调用该函数并传入res.data作为参数。  }else{ 判断fail是否为一个函数类型，如果是，则调用该函数并传入参数res。  }  },  fail: function(res) {  console.log(res);  typeof fail == "function" && fail(res);   }  }) }

就是中我们传进来的logo变量，也就是图片的绝对路径。

服务器的接收图片代码

阅读了我前一篇关于登录流程的文章的读者，都已经了解了我所使用的服务器是基于php框架构建的。

这里我只贴一下接收的代码；

若$_FILES['photos']数组非空，{ 将用户ID作为参数，上传logo函数被调用来处理位于'photos'目录下'manage/images/user'子目录中的'logo'文件，并将结果赋值给数组$up_arr中的'logo'键。 将数组$up_arr中键为'logo'的元素赋值为该元素的第0个索引处的值。 $user_info中的'logo'键被赋予了一个新值，这个值是由$Server_Http_Path与$up_arr数组中的'logo'元素拼接而成的。  }

核心方法在中。

图片接收保存

若尚未定义名为“upload_logo”的函数，则： 定义一个名为upload_logo的函数，其中包含以下参数：$key_name默认值为'photos'，$logo_path默认值为'manage/images/nurse'，$pre_name默认值为'logo'，$salt默认值为'20160101'，$encode默认值为1，$make默认值为0。   $result_arr = array(); 全局变量$Server_Http_Path和$App_Error_Conf已被设定。   //分文件夹保存    $date_info = getdate(); $year$被赋值为$date_info$数组中代表年份的元素；$date_info$数组中的键为'year'。 mon变量被赋值为date_info数组中'mon'键对应的值。 $mday$的值被赋给了变量$day$，该值来源于$date_info$数组。 将路径信息整合，形成新的文件存储路径，具体操作为：将原始路径`$logo_path`与年份`$year`、月份`$mon`和日期`$day`依次连接，形成如下的格式：`%s/%s/%s/%s`。   if(!is_dir($logo_path)){ 成功创建了文件夹，路径为$logo_path，权限设置为777，并确保了递归创建。   }   //图片上传 遍历照片数组，对每个元素进行迭代，其中键为索引，值为照片对象。 $photo$被赋值为$_FILES数组中名为'photos'的元素。   $name = $key_name; 获得文件ID的过程是：通过调用Input类的file方法，并将参数$name传入，从而成功赋值给$file_id变量。 若文件标识非空，并且该标识有效，则不进行操作。 获取文件ID对应的原始扩展名，并将其赋值给变量$entension。 若预先输入的名称等于“婴儿”，{ 新的名称由原始名称、一个下划线、盐值的整数形式、另一个下划线、当前时间戳、再一个下划线以及一个随机生成的数字序列组成。    }else { 新的名称由原始名称、一个下划线、盐值的整数形式、另一个下划线以及一个通过salt_rand函数生成的随机数构成，该随机数范围限定在2到2之间。    } 文件ID经过移动操作，将标志文件从原路径移动到了新路径，并赋予了新的文件名，该文件名的后缀为“_b.”加上原始扩展名。    if(!empty($path_id)){ 路径名称被赋值为路径标识符对象调用的获取路径名方法的结果。 获取图片尺寸的函数被调用，其参数为路径名称，执行后返回的结果存储在$image_size变量中。 图片的宽度值被赋值为image_size数组中索引为"0"的元素；即，通过这种方式，我们成功获取了图片的宽度。 图像的高度值等于从数组“image_size”中取得的第一个元素；即，$height被赋值为image_size数组的第一个成员。 若预先设定的名称等于“婴儿”或“视频”，则执行以下操作： 将照片信息的URL设置为路径名称。 将图片信息的宽度属性值设为$weight。 将照片信息中的高度属性值设为$height。  $result_arr[] = $photo_info;  }else{  $result_arr[] = $path_name;  }      //处理图片 if($make == 1){ 将图片路径载入后，通过Image类的方法进行处理，首先调整其大小，具体是将图片的宽度设置为200像素，同时保持原有宽高比，计算高度时将高度乘以200再除以宽度。 图像文件保存至路径为$logo_path."/".$new_name."_s.".$entension的指定位置。  //dd($img); 直接返回图片对象以生成jpg格式的响应。     }    } if(empty($result_arr)){ 响应中的结果代码被设定为负数1006。 $response['result_msg']被设置为$App_Error_Conf中的-1006错误信息。   return response($response);    }  if($encode == 1){ $result_arr经过json编码处理，转换成了数组。    }   }   return $result_arr;  }  }

这个代码格式真的很烦人啊，我就大概整理了一下。

这样我们就入门了小程序图片上传和接口功能了。

这是关于“微信小程序实现图片上传及服务端接收功能”的完整文章，感谢大家的阅读！相信大家对此已有一定认识，所分享的内容希望能对大家有所裨益。如需进一步学习相关知识，敬请关注创新互联网站建设公司行业资讯频道！

此外，如需了解云服务器，不妨关注创新互联建站。该平台提供海内外云服务器，起步价仅为15元。享受三天无理由退款及7*24小时售后支持。公司持有IDC许可证，并供应包括云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器在内的多种云主机租赁服务。此外，还提供企业上云的全方位解决方案。这些服务以“安全可靠、操作简便、服务响应迅速、性价比高”为特点，专为满足企业上云需求而定制，能够适应用户多样化的应用场景。

微信小程序中，实现图片上传与服务器端接收功能的关键步骤包括：首先，在小程序前端，用户需选择或拍摄图片；接着，通过小程序的网络请求功能，将图片数据发送至服务器；然后，服务器端接收到图片数据后，进行相应的处理；最后，服务器将处理结果反馈给小程序前端，实现图片上传与接收的完整流程。