上传图片到服务器：

首先，需要在页面前端设置一个用于选择图片的区域，以此激活wx接口的功能。随后，利用该wx接口将选中的图片路径进行保存。

-wxml         发布项目  /**选择图片 */  choose: function () {   var that = this   wx.chooseImage({    count: 1, sizeType:原图与压缩图可选，默认支持两种格式。 sourceType:[相册,相机],//可选来源为相册或相机，默认情况下两者均被包含    success: function (res) { res中提取的临时文件路径存储于变量tempFilePaths中。     that.setData({ 临时文件路径：res中的tempFilePaths     }) 在控制台输出响应中的临时文件路径数组。 wx存储设置操作，其中键名为"card"，存储的数据为tempFilePaths数组的第一个元素。    }   })  },

2.使用wx.将刚才上传的图片上传到服务器上

 formSubmit2: function (e) {     var that = this card变量是通过调用wx.getStorageSync方法获取的，该方法检索名为'card'的本地存储数据。     wx.uploadFile({ 该URL指向app的全局数据中创建资金的接口。      filePath: card,      name: 'card',      formData: { 'user_id'字段对应的是全局变量中存储的用户ID值，即app.globalData.user_id。 该对象的人名为：e.detail.value中存储的个人信息，即person。 该公司的名称为：e.detail.value所对应的company字段值。      }, 成功：函数(res)执行{       console.log(res)      }     })    }   }  },

PS： 微信小程序上传一或多张图片

一.要点

1.选取图片

wx.chooseImage({ 尺寸类型：空数组，代表原始图像，压缩图像，默认情况下这两种图像都包含在内。 sourceType:空数组，代表从相册选取图片，或通过相机拍摄，系统默认支持这两种方式。    success: function (res) {     console.log(res); array变量存储了res对象中的tempFilePaths属性，该属性包含了图片的本地存储路径列表。    }   })

2.上传图片

wx.uploadFile({ 该URL指向开发者服务器，具体地址为：。 filePath:空字符串，表示需要上传的文件资源所在路径，该路径应使用String类型进行定义。 名称为“uploadFile”，代表上传的文件所关联的键值，（这是后台接口规定的用于图片上传请求的特定参数）。    header: { 该字段名为'content-type'，其值设定为'multipart/form-data'。    }, // 设置请求的 header formData:{}，即在HTTP请求中加入的其他非必需的参数。    success: function (res) {    },    fail: function (res) {    }   })

二.代码示例

// 点击上传图片 upShopLogo: function () {   var that = this;   wx.showActionSheet({ itemList中包含以下选项：选择自相册中的内容，以及进行拍照操作。    itemColor: "#f7982a",    success: function (res) {     if (!res.cancel) {      if (res.tapIndex == 0) { 执行选择微信相册图片的操作指令。 若(res的tapIndex属性值等于1)，则{ 执行选择微信相册的操作，指定使用相机功能。      }     }    }   })  },

定义函数chooseWxImageShop，参数为type   var that = this;   wx.chooseImage({ 尺寸类型包括：原始尺寸、压缩尺寸。    sourceType: [type],    success: function (res) { /*上传单张 执行上传文件操作，将API_URL与字符串'shop/shopIcon'拼接，并将res.tempFilePaths数组中的第一个元素作为文件路径，进行文件上传。 */  /*上传多张（遍历数组，一次传一张） 由于index在res.tempFilePaths中遍历，因此执行以下操作：{ 执行上传操作，将API_URL与字符串'shop/shopImage'拼接，然后将res.tempFilePaths中的第index个文件路径作为参数传递给upload_file函数。     } */    }   })  }, 定义上传文件函数：接受URL和文件路径作为参数，执行上传操作。   var that = this;   wx.uploadFile({    url: url,    filePath: filePath, 名称为“uploadFile”，    header: {     'content-type': 'multipart/form-data'    }, // 设置请求的 header    success: function (res) {     wx.showToast({        title: "图片修改成功", 图标样式：成功图标        duration: 700       })    },    fail: function (res) {    }   })  },

感谢您耐心阅读了这篇文章，小编所写的关于“微信小程序如何将图片上传至服务器”的内容，希望能对各位读者有所裨益。在此，也衷心希望各位能够继续支持创新互联的发展，并关注我们创新互联的行业资讯频道，那里有更多丰富的知识等待您的探索和学习。

本文题目：微信小程序如何实现上传图片到服务器

标题网址：

成都创新互联网站建设公司，致力于提供全方位服务，包括优化用户体验、构建网站平台、托管虚拟主机、维护网站运行、运营微信公众号以及策划网站发展。