微信小程序上传图片实例

下面是详细的“微信小程序上传图片实例”的攻略。

前提条件

1. 微信开发者工具
2. 小程序已引入wx.request组件及相应的权限
3. 上传图片所使用的后端接口已编写完成并提供相应的URL

第一步：页面代码实现

在小程序的页面中添加能够上传图片的功能，需要使用到小程序中的wx.chooseImage API，用于调用用户的相册或摄像头去选择图片或拍照，并将所选的图片保存在本地。

例如，我们在页面中添加一个按钮，绑定相应的tap事件，在事件处理函数中，调用wx.chooseImage API实现选择图片功能：

// .wxml
<view>
  <button bindtap="chooseImage">选择图片上传</button>
</view>

// .js
Page({
  data: {
    imageSrc: '',  // 用于存放所选图片的本地路径
  },

  chooseImage() {
    let that = this;
    wx.chooseImage({
      success(res) {
        console.log(res);
        const tempFilePaths = res.tempFilePaths[0]
        that.setData({
          imageSrc: tempFilePaths
        })
      }
    })
  }
})

在选择图片成功后，我们将所选的图片保存在data中的imageSrc属性中，用于后续的上传操作。

第二步：上传图片到后台

在选择图片后，需要将用户所选的图片上传到我们的服务器端，这里通过使用小程序的wx.uploadFile API，来实现图片上传操作。

在uploadFile的语法如下：

wx.uploadFile(object)

其中，object的参数列表如下：

属性	类型	默认值	描述
url	string	null	开发者服务器接口地址
filePath	string	null	要上传文件资源的路径 (本地路径)
name	string	'file'	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
formData	Object	{}	HTTP 请求中其他额外的 form data
success	function	null	接口调用成功的回调函数
fail	function	null	接口调用失败的回调函数

例如，我们将上述代码中选择的图片进行上传操作：

Page({
  // ...

  uploadImage() {
    let that = this;
    wx.uploadFile({
      url: 'https://example.com/upload',  // 后台API接口地址
      filePath: that.data.imageSrc,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'  // 设置为FormData格式
      },
      formData: {
        'user': 'ddqf'
      },
      success(res) {
        console.log(res);
        const data = res.data
        if (res.statusCode === 200) {
          wx.showToast({
            title: '上传成功',
            icon: 'success'
          })
        }
      },
      fail(res) {
        console.log(res);
      }
    })
  }
})

示例说明

下面演示一个完整的“微信小程序上传图片实例”代码，用于选择图片并上传：

// .wxml
<view>
  <button bindtap="chooseImage">选择图片上传</button>
  <button bindtap="uploadImage">上传图片</button>
  <image bindtap="previewImage" src="{{imageSrc}}"></image>
</view>

// .js
Page({
  data: {
    imageSrc: ''
  },

  chooseImage() {
    let that = this;
    wx.chooseImage({
      success(res) {
        console.log(res);
        const tempFilePaths = res.tempFilePaths[0]
        that.setData({
          imageSrc: tempFilePaths
        })
      }
    })
  },

  uploadImage() {
    let that = this;
    wx.uploadFile({
      url: 'https://example.com/upload',  // 后台API接口地址
      filePath: that.data.imageSrc,
      name: 'file',
      header: {
        'content-type': 'multipart/form-data'  // 设置为FormData格式
      },
      formData: {
        'user': 'ddqf'
      },
      success(res) {
        console.log(res);
        const data = res.data
        if (res.statusCode === 200) {
          wx.showToast({
            title: '上传成功',
            icon: 'success'
          })
        }
      },
      fail(res) {
        console.log(res);
      }
    })
  },

  previewImage() {
    let that = this;
    wx.previewImage({
      urls: [that.data.imageSrc],
      current: that.data.imageSrc
    })
  }
})

以上代码展示了如何在小程序中实现上传图片功能，其中包含了从选择图片、预览图片到上传图片的完整过程，希望对您有所帮助。