微信小程序-拍照或选择图片并上传文件
转载 & & 投稿：lqh
这篇文章主要介绍了微信小程序-拍照或选择图片并上传文件的相关资料,需要的朋友可以参考下
微信小程序-拍照或选择图片并上传文件
调用拍照API：https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=#wxchooseimageobject
上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html
主要js代码：
choice: function () {
var that = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
that.setData({
textHidden: true,
image_photo: tempFilePaths,
photoHidden: false
uploadPhoto: function () {
var that = this
let param = util.json2Form({
orderSn: that.data.orderSn,
parkingPhoto: that.data.image_photo,
wx.uploadFile({
url: 'https://testapi.****.com/v4.0.0/uploadParkingPhoto', //仅为示例
filePath: that.data.image_photo[0],
name: 'parkingPhoto',
formData: {
'tel': '***********',
'orderSn': that.data.orderSn,
success: function (res) {
var obj = JSON.parse(res.data);;
console.log(obj.result)
console.log(obj.msg)
var resule = obj.
var msg = obj.
if (resule == 'false') {
wx.showToast({
title: msg,
icon: 'success',
duration: 2000
wx.navigateBack({
success: function (res) {
wx.showToast({
title: msg,
icon: 'success',
duration: 2000
1.调用wx.chooseImage() 自动弹出选择窗口，不用调用操作菜单wx.showActionSheet()，否则重复
2. 上传文件的时候filePath必须是数组，当你单张的时候需要使用数组，若只有一张要用[0]
3. 最需要注意的是，success返回数据是String类型，我们需要将String类型转换成Object
js字符串转换成obj
用js 是有三种方法的
js自带的eval函数，其中需要添加小括号eval('('+str+')');
JSON.parse(str)
$.parseJSON( jsonstr )
但是在微信小程序中，我们只能用JSON.parse(str)，其他的都不可以
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序上传图片(附后端代码) - 简书
微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片。
在小程序中我们可以通过image组件显示图片。
当然小程序也是可以上传图片的，也写的很清楚。
首先选择图片
通过wx.chooseImage(OBJECT)实现
官方示例代码
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
图片最多可以选择9张, 也可以通过拍摄照片实现，当选择完图片之后会获取到图片路径,
这个路径在本次启动期间有效。
如果需要保存就需要用wx.saveFile(OBJECT)
通过wx.uploadFile(OBJECT) 可以将本地资源文件上传到服务器。
原理就是客户端发起一个 HTTPS POST 请求，其中 content-type为 multipart/form-data。
官方示例代码
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
success: function(res){
var data = res.data
//do something
看完了文档, 写一个上传图片就没有那么麻烦了,下面是真实场景的代码
import constant from '../../common/constant';
src: "../../image/photo.png",
//绑定image组件的src
onLoad: function (options) {
uploadPhoto() {
var that =
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFileP
upload(that, tempFilePaths);
function upload(page, path) {
wx.showToast({
icon: "loading",
title: "正在上传"
wx.uploadFile({
url: constant.SERVER_URL + "/FileUploadServlet",
filePath: path[0],
name: 'file',
header: { "Content-Type": "multipart/form-data" },
formData: {
//和服务器约定的token, 一般也可以放在header中
'session_token': wx.getStorageSync('session_token')
success: function (res) {
console.log(res);
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
var data = res.data
page.setData({
//上传成功修改显示头像
src: path[0]
fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
complete: function () {
wx.hideToast();
//隐藏Toast
后端是用java写的，一开始的时候，后端开始用了一些框架接收上传的图片，出现了各种问题，后来使用了纯粹的Servlet就没有了问题, 把代码贴出来省的以后麻烦了。
注意: 代码使用了公司内部的框架，建议修改后再使用
public class FileUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static Logger logger = LoggerFactory.getLogger(FileUploadServlet.class);
public FileUploadServlet() {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
JsonMessage&Object& message = new JsonMessage&Object&();
EOSResponse eosResponse =
String sessionToken =
FileItem file =
InputStream in =
ByteArrayOutputStream swapStream1 =
request.setCharacterEncoding("UTF-8");
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
// 1. 得到 FileItem 的集合 items
List&FileItem& items = upload.parseRequest(request);
logger.info("items:{}", items.size());
// 2. 遍历 items:
for (FileItem item : items) {
String name = item.getFieldName();
logger.info("fieldName:{}", name);
// 若是一个一般的表单域, 打印信息
if (item.isFormField()) {
String value = item.getString("utf-8");
if("session_token".equals(name)){
sessionToken =
if("file".equals(name)){
//session校验
if(StringUtils.isEmpty(sessionToken)){
message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
String userId = RedisUtils.hget(sessionToken,"userId");
logger.info("userId:{}", userId);
if(StringUtils.isEmpty(userId)){
message.setStatus(StatusCodeConstant.SESSION_TOKEN_TIME_OUT);
message.setErrorMsg(StatusCodeConstant.SESSION_TOKEN_TIME_OUT_MSG);
//上传文件
if(file == null){
swapStream1 = new ByteArrayOutputStream();
in = file.getInputStream();
byte[] buff = new byte[1024];
int rc = 0;
while ((rc = in.read(buff)) & 0) {
swapStream1.write(buff, 0, rc);
Usr usr = new Usr();
usr.setObjectId(Integer.parseInt(userId));
final byte[] bytes = swapStream1.toByteArray();
eosResponse= ServerProxy.getSharedInstance().saveHeadPortrait(usr, new RequestOperation() {
public void addValueToRequest(EOSRequest request) {
request.addMedia("head_icon_media", new EOSMediaData(EOSMediaData.MEDIA_TYPE_IMAGE_JPEG, bytes));
// 请求成功的场合
if (eosResponse.getCode() == 0) {
message.setStatus(ConstantUnit.SUCCESS);
message.setStatus(String.valueOf(eosResponse.getCode()));
} catch (Exception e) {
e.printStackTrace();
} finally{
if(swapStream1 != null){
swapStream1.close();
} catch (IOException e) {
e.printStackTrace();
if(in != null){
in.close();
} catch (IOException e) {
e.printStackTrace();
PrintWriter out = response.getWriter();
out.write(JSONObject.toJSONString(message));
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
微信公众账号: likeDev
Android电子书: http://book.520wcf.com
视频地址: http://youku.520wcf.com
CSDN博客地址:http://blog.csdn.net/yulianlin
Java 基础思维导图，让 Java 不再难懂 - 工具资源 - 掘金思维导图的好处 最近看了一些文章的思维导图，发现思维导图真是个强大的工具。了解了思维导图的作用之后，觉得把它运用到java上应该是个不错的想法，这样回顾知识点的时候一目了然，快速知道自己的短板。 思维导图...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
给提问的开发者的建议：提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。
写一个简明扼要的标题，并且正文描述清楚你的问题。
提交 BUG：需要带上基础库版本号，设备信息（iOS, Android,开发工具等等），操作系统信息（系统版本），以及可以让他人重现...
羊山中学九年级作文竞赛实施方案 一、活动目的： 作文是反映学生内心世界、知识世界的一扇窗户。为了丰富学生的校园生活，使广大学生在平日里多想多记，关注生活，做生活的有心人。力图通过学生手中的笔，真实地记录自己生活的感受和成长过程的点滴，让学生学会作文，学会做人。同时激发学生学...
第三章 张天娇 三年前，当他怀揣着人生的理想与抱负迈进大学校门的时候，死神便开始向他张开了双臂。 那是一个下雨的夜晚，秦风和上大二的哥哥晚自习后，一起撑伞去附近的一个偏僻的银行取生活费，那是他们未来一个月的所有开支。刚拿到手还没有捂热，就被五六个人走上前来要钱，他们手里拿着...
目前，我国人才选拔机制和当前考试制度，优秀教育资源分配不均，传统课堂教学又不能做到面面俱到，加上应试教育的积重难返，激发了学生和家长对于辅导班的需求，近年涌现出非常多的一对一辅导品牌，其中，嗨课堂成功突围成为了最好的一对一在线辅导品牌。 一家好的一对一辅导品牌需要有那些特点...
我单身至今是因为一直想谈场长长久久的爱情长跑，想要有个人能一直相处好久好久。有个朋友对我说，现在不会有男生愿意在一个女生身上耗费时间超过3个月，更别提你想要的长长久久了。 事实上，她说的也许是对的，怎么会有人在没有回应的情况下坚持那么久。可是我还是有点不甘心，我要选择的是一...
六、复利效应 爱因斯坦说，复利是这个世界的第八大奇迹。认识复利效应，可以做许多有益的事。譬如读书、写作、投资、锻炼身体都是具有复利效应的事，越坚持带给人的回报越大。聪明人把时间花在能创造复利的事情上，愚昧者却全然不理会复利不复利 七、君子不器 形而上者为之道，形而下者为之器...没有更多推荐了，
不良信息举报
举报内容：
微信小程序开发之图片上传+Java服务端接收
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！微信小程序的 wx.uploadFile 有谁走通的。 求帮助
[问题点数：20分，结帖人qq_]
微信小程序的 wx.uploadFile 有谁走通的。 求帮助
[问题点数：20分，结帖人qq_]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2017年2月 总版技术专家分月排行榜第三
2018年1月 .NET技术大版内专家分月排行榜第一2017年5月 .NET技术大版内专家分月排行榜第一2017年4月 .NET技术大版内专家分月排行榜第一2017年3月 .NET技术大版内专家分月排行榜第一2017年2月 .NET技术大版内专家分月排行榜第一2016年10月 .NET技术大版内专家分月排行榜第一2016年8月 .NET技术大版内专家分月排行榜第一2016年7月 .NET技术大版内专家分月排行榜第一
匿名用户不能发表回复！|微信小程序开发（二）图片上传+服务端接收详解
转载 & & 作者：码小白
本篇文章主要介绍了微信小程序开发（二）图片上传+服务端接收，具有一定的参考价值，有兴趣的可以了解一下。
这次介绍下小程序当中常用的图片上传。
前几天做了图片上传功能，被坑了一下。接下来我们来看一下微信的上传api。
这里的filePath就是图片的存储路径，类型居然是个String，也就是 只能每次传一张图片，我以前的接口都是接收一个array，我本人又是一个半吊子的PHP，只能自己去改接收图片的接口。
看一下页面效果图
一个很常见的修改头像效果，选择图片（拍照），然后上传。
下面就是贴代码了
首先是小程序的wxml代码
&view class="xd-container"&
&form bindsubmit="bindSaveTap"&
&image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"&&/image&
&view class="xd-view-section"&
&text class="xd-abs xd-flex-left xd-text-nick"&昵称&/text&
&input name="nick_name" placeholder="请输入昵称" class="xd-input" value="{{userInfo.user_name}}"/&
&view class="xd-view-section1"&
&text class="xd-abs xd-flex-left xd-text-nick"&宝宝性别&/text&
&radio-group class="xd-abs xd-radio-group" name="baby_sex"&
&label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item"&
&radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/&
&radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/&
&text class="xd-radio-text"&{{item.value}}&/text&
&/radio-group&
&view class="xd-view-section1"&
&text class="xd-abs xd-flex-left xd-text-nick"&宝宝年龄&/text&
&input placeholder="请输入年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/&
&input name="baby_age" placeholder="请输入年龄" wx:else value="" class="xd-input"/&
&button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover"&保存&/button&
css代码我就不贴了，一些样式而已。
对应的JS代码
var util = require('../../../utils/util.js')
var app = getApp()
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 =
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 =
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
console.log(res);
_this.setData({
logo: res.tempFilePaths[0],
主要讲解一下JS代码
1、chooseImageTap方法
用来显示一个选择图片和拍照的弹窗，用到了微信的一个页面交互的api showActionSheet，点击查看详细使用
2、chooseWxImage方法
主要是用来选择图片以及接收图片路径回调的监听，点击查看详细使用
在chooseWxImage方法的success回调中我们可以看到，我把返回的图片路径res.tempFilePaths[0] 赋值给了logo，下面我们只需要调用upload方法就ok了，微信的uploadFile方法被我封装了一下变成了upload_file。
uploadFile方法
//上传文件
function upload_file(url, filePath, name, formData, success, fail) {
console.log('a='+filePath)
wx.uploadFile({
url: rootUrl + url,
filePath:filePath,
name:name,
'content-type':'multipart/form-data'
}, // 设置请求的 header
formData: formData, // HTTP 请求中其他额外的 form data
success: function(res){
console.log(res);
if(res.statusCode ==200 && !res.data.result_code){
typeof success == "function" && success(res.data);
typeof fail == "function" && fail(res);
fail: function(res) {
console.log(res);
typeof fail == "function" && fail(res);
filePath就是upload_file中我们传进来的logo变量，也就是图片的绝对路径。
服务器的接收图片代码
看过我上篇文章登录流程的文章的都熟悉了我服务器用的是php框架是Laravel。
这里我只贴一下接收image的代码；
if(!empty($_FILES['photos'])){
$up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
$up_arr['logo'] = $up_arr['logo'][0];
$user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
核心方法在upload_log中。
图片接收保存
if( !function_exists('upload_logo')){
function upload_logo( $key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='',$encode = 1,$make=0 ){
$result_arr = array();
global $Server_Http_Path,$App_Error_C
//分文件夹保存
$date_info = getdate();
$year = $date_info['year'];
$mon = $date_info['mon'];
$day = $date_info['mday'];
$logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);
if(!is_dir($logo_path)){
$res=mkdir($logo_path,0777,true);
//图片上传
//foreach($photos as $key =& $photo ){
$photo = $_FILES['photos'];
$name = $key_
$file_id = Input::file($name);
if(!empty($file_id) && $file_id -& isValid()){
$entension = $file_id -& getClientOriginalExtension();
if($pre_name == 'baby'){
$new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
$new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
$path_id = $file_id -& move($logo_path,$new_name."_b.".$entension);
if(!empty($path_id)){
$path_name = $path_id-&getPathName();
$image_size=getimagesize($path_name);
$weight=$image_size["0"];////获取图片的宽
$height=$image_size["1"];///获取图片的高
if($pre_name == "baby" || $pre_name == "video") {
$photo_info['url'] = $path_
$photo_info['width'] = $
$photo_info['height'] = $
$result_arr[] = $photo_
$result_arr[] = $path_
//处理图片
if($make == 1){
$img = Image::make($path_name)-&resize(200, $height*200/$weight);
$img-&save($logo_path ."/".$new_name."_s.".$entension);
//dd($img);
// return $img-&response('jpg');
if(empty($result_arr)){
$response['result_code'] = -1006;
$response['result_msg'] = $App_Error_Conf[-1006];
return response($response);
if($encode == 1){
$result_arr = json_encode($result_arr);
return $result_
这个代码格式真的很烦人啊，我就大概整理了一下。
这样我们就入门了小程序图片上传和接口功能了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}