微信小程序上传图片到服务器wx.uploadFile

78 阅读 0 评论 52 点赞

我是靠谱客的博主忧伤草丛，这篇文章主要介绍微信小程序上传图片到服务器wx.uploadFile，现在分享给大家，希望可以做个参考。

项目中肯定会遇到上传文件到服务器端，小程序提供了很有用的api

wxml代码：

复制代码

1
2
<image  mode='widthFix' src="{{imgUrl}}"></image>
<view bindtap="getPhoto">上传图片</view>

js代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
getPhoto(e){   //获取手机相册功能
  let _this = this;
    wx.chooseImage({      
      count: 1,       //上传图片数量
      sizeType: ['original', 'compressed'],   
      sourceType: ['album', 'camera'],
      success(res) {
        console.log(res)
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      
        _this.upLoad(_this, tempFilePaths);   //调用上传接口
      }
    })

  },
  upLoad(that,filePath){
    wx.uploadFile({
      url: ROOT_URL,       //换成你自己的url地址
      filePath: filePath[0],    //图片文件 
      name: 'file',
      header: { 
        "Content-Type": "multipart/form-data",    //头部设置
      },
      formData: {
        //这里放你自己额外要带的参数
      },
      success: function (res) {
        //console.log(res)
        var data = JSON.parse(res.data) //do something 
       
          //根据你自己的项目要求，做处理
            this.setData({
                imgUrl:filePath[0]
            })

      }
    }) 
  },