微信小程序上传图片写法

微信小程序上传图片

小程序上传图片需要用到小程序API中的wx.uploadFile（）方法。以下是一个基本的示例代码：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    wx.uploadFile({
      url: 'http://example.com/upload', // 上传接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      success: function (res) {
        var data = res.data; // 上传成功后的返回数据
        console.log(data);
      },
      fail: function (res) {
        console.log(res);
      }
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这个示例代码中，首先使用wx.chooseImage（）方法让用户选择一张图片，然后通过wx.uploadFile（）方法将选中的图片上传到指定的接口地址。在上传成功后，我们可以在success回调函数中获取上传成功后的返回数据，这里的返回数据是由接口返回的。

需要注意的是，上传图片的接口地址需要根据实际情况进行替换，另外还需要根据具体的业务需求对上传的图片进行大小和来源的限制。

当使用wx.chooseImage（）方法选择图片后，我们需要将选中的图片预览给用户，一般是在wxml文件中添加一个image标签来显示图片。以下是一个示例代码：

<view>
  <button bindtap="chooseImage">选择图片</button>
  <image src="{{imgSrc}}" mode="aspectFit" />
</view>

1
2
3
4
5

count：表示可以选择的图片数量，默认值为1，最大值为9。如果设置为9，则用户可以选择最多9张图片。
sizeType：表示原始图片或压缩图片的尺寸。可选值为 或 。如果指定为 ，则选择的图片不会被压缩。如果指定为 ，则选择的图片会被压缩，可以节省用户的流量。originalcompressedoriginalcompressed
sourceType：表示图片的来源。可选值为 或 。如果指定为 ，则从相册选择图片。如果指定为 ，则使用相机拍摄图片。albumcameraalbumcamera
success：表示选择图片成功后的回调函数，函数中的 参数包含选择的图片的本地临时文件路径列表。res
总之， 接口可以让小程序用户方便地从本地相册或相机选择图片，并返回本地临时文件路径列表，方便后续操作。参数 、 和 可以根据实际需求进行灵活配置。chooseImagecountsizeTypesourceType