微信小程序上传图片到服务器实例

Posted 勤能补拙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序上传图片到服务器实例相关的知识,希望对你有一定的参考价值。

这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有

1. wx.chooseImage 从本地相册选择图片或使用相机拍照。

2.wx.uploadFile 将本地资源上传到服务器.

3. 修改原来的小程序头像并保存,调用后台接口修改操作

 第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

我这里也贴出来了,不够详细可以去官网看。

1、选择图片接口

wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

OBJECT参数说明:

参数类型必填说明
count Number 最多可以选择的图片张数,默认9
sizeType StringArray original 原图,compressed 压缩图,默认二者都有
sourceType StringArray album 从相册选图,camera 使用相机,默认二者都有
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function

接口调用结束的回调函数(调用成功、失败都会执行)

 

 

 

 

 

 

 

success返回参数说明:

参数类型说明最低版本
tempFilePaths StringArray 图片的本地文件路径列表  
tempFiles ObjectArray 图片的本地文件列表,每一项是一个 File 对象 1.2.0

 

 

 

 

我这里先贴官方是例子出来。

 

wx.chooseImage({
  count: 1, // 默认9
  sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})
View Code

第二步:

2、上传图片接口 wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器。我们通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中content-type 为multipart/form-data 。

OBJECT参数说明:

参数类型必填说明
url String 开发者服务器 url
filePath String 要上传文件资源的路径
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header Object HTTP 请求 Header, header 中不能设置 Referer
formData Object HTTP 请求中其他额外的 form data
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

 

 

 

 

 

 

 

 

 

 

success返回参数说明:

 

参数类型说明
data String 开发者服务器返回的数据
statusCode Number 开发者服务器返回的 HTTP 状态码

 

 

 

 

 

官方实例代码:

 

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: \'https://example.weixin.qq.com/upload\', //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: \'file\',
      formData:{
        \'user\': \'test\'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

是否看到这里对选择图片和上传的接口了解很多,

第三步:代码实现

接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:

没修改之前。                                                           修改后并保存数据库

这里的样式自已调

<view class="my-item" style=\'height:60px;line-height:60px;margin-top:10px\' bindtap="changeAvatar"> 
  <text>头像</text>
  <view class="language">
  <image  class="userinfo-avatar" src="{{user.avatar}}" background-size="cover"></image> 
</view>

 js模块

注意:

wx.uploadFile自已有一个this,我们格外定义的var _this = this 到时候赋值的时候把this带进来就OK了。

 //点击图片选择手机相册或者电脑本地图片
  changeAvatar: function(e) {
    var _this = this  
    wx.chooseImage({
      count: 1,// 默认9
      sizeType: [\'original\', \'compressed\'],// 可以指定是原图还是压缩图,默认二者都有
      sourceType: [\'album\', \'camera\'],// 可以指定来源是相册还是相机,默认二者都有
      success: function(res) {
         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        //这里是上传操作
        wx.uploadFile({
          url: getApp().globalData.clientUrl + \'/uploadAvatarUrl\', //里面填写你的上传图片服务器API接口的路径 
          filePath: tempFilePaths[0],//要上传文件资源的路径 String类型 
          name: \'avatar\',//按个人情况修改,文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容,(后台接口规定的关于图片的请求参数)
          header: {
            "Content-Type": "multipart/form-data"//记得设置
          },
          formData: {
               //和服务器约定的token, 一般也可以放在header中
            \'session_token\': wx.getStorageSync(\'session_token\')
          },
          success: function(res) {
            //当调用uploadFile成功之后,再次调用后台修改的操作,这样才真正做了修改头像
            if (res.statusCode = 200) {
              // var data = res.data
              // var statusCode = res.statusCode
              // console.log("返回值1" + data);
              // console.log("返回值2" + statusCode)
              //这里调用后台的修改操作, tempFilePaths[0],是上面uploadFile上传成功,然后赋值到修改这里。
              wx.request({
                url: getApp().globalData.clientUrl + \'/update?avatar=\' + tempFilePaths[0], //真正修改操作,填写你们修改的API
                header: {
                  \'content-type\': \'application/json\', 
                },
                method: \'POST\',
                success: function(res) {
                  if (res.data.code == 200) {
                    wx.showToast({
                      title: \'修改成功\',
                      icon: \'success\',
                      duration: 2500
                    })
//wx.uploadFile自已有一个this,我们刚才上面定义的var _this = this 把this带进来 _this.setData({ "user.avatar": tempFilePaths[0] }); } }, }) } } }) } }) },

这样就实现了修改小程序的头像了,希望帮到正在奋斗的你,遇见更好的你。

这篇文章哪里还不足的话,希望路过的大神指点指点小弟。

 

以上是关于微信小程序上传图片到服务器实例的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序拍照和上传图片实现

微信小程序--图片相关问题合辑

微信文档小程序如何上传图片到电脑桌面

图略小程序怎么上传图片

微信小程序--实现图片上传

微信小程序实现图片是上传预览功能