微信小程序中怎么实现拍照或从相册选取图片上传

微信小程序中怎么实现拍照或从相册选取图片上传

在微信小程序开发中，实现拍照或从相册选取图片上传是一个常见的需求。本文将详细介绍如何在微信小程序中实现这一功能，包括如何调用微信的API、如何处理图片、以及如何将图片上传到服务器。

1. 准备工作

在开始之前，确保你已经完成了以下准备工作：

• 你已经注册了微信小程序开发者账号，并且创建了一个小程序项目。
• 你已经熟悉了微信小程序的基本开发流程，包括页面结构、样式和逻辑处理。
• 你已经配置好了小程序的开发环境，并且可以正常运行和调试小程序。

2. 调用微信API选择图片

微信小程序提供了 wx.chooseImage API，用于从相册选择图片或调用相机拍照。该API的基本用法如下：

wx.chooseImage({
  count: 1, // 最多可以选择的图片张数，默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success(res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
    // 这里可以将图片路径传递给页面进行显示
    this.setData({
      imagePath: tempFilePaths[0]
    })
  }
})

2.1 参数说明

• count: 最多可以选择的图片张数，默认是9张。
• sizeType: 可以指定是原图还是压缩图，默认二者都有。original 表示原图，compressed 表示压缩图。
• sourceType: 可以指定来源是相册还是相机，默认二者都有。album 表示从相册选择，camera 表示调用相机拍照。

2.2 返回值

• tempFilePaths: 返回选定照片的本地文件路径列表，可以通过 img 标签的 src 属性显示图片。

3. 显示选择的图片

在选择图片后，我们可以将图片的路径传递给页面进行显示。假设我们在页面的 data 中定义了一个 imagePath 变量来存储图片路径：

Page({
  data: {
    imagePath: ''
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({
          imagePath: res.tempFilePaths[0]
        })
      }
    })
  }
})

在页面的 wxml 文件中，我们可以通过 image 组件来显示图片：

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

4. 上传图片到服务器

在选择图片后，我们通常需要将图片上传到服务器。微信小程序提供了 wx.uploadFile API 来实现文件上传功能。

4.1 上传图片的基本用法

wx.uploadFile({
  url: 'https://example.com/upload', // 服务器地址
  filePath: tempFilePaths[0], // 要上传的文件路径
  name: 'file', // 文件对应的 key，服务器端需要通过这个 key 获取文件
  formData: {
    'user': 'test'
  }, // HTTP 请求中其他额外的 form data
  success(res) {
    const data = res.data
    // 上传成功后的处理
    console.log('上传成功', data)
  },
  fail(err) {
    // 上传失败后的处理
    console.error('上传失败', err)
  }
})

4.2 参数说明

• url: 服务器地址，必须是 HTTPS 协议。
• filePath: 要上传的文件路径，即 wx.chooseImage 返回的 tempFilePaths 中的路径。
• name: 文件对应的 key，服务器端需要通过这个 key 获取文件。
• formData: HTTP 请求中其他额外的 form data，可以传递一些额外的参数。

4.3 返回值

• res.data: 服务器返回的数据，通常是 JSON 格式的字符串。

4.4 示例代码

结合前面的代码，我们可以在选择图片后立即上传图片：

Page({
  data: {
    imagePath: ''
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths
        this.setData({
          imagePath: tempFilePaths[0]
        })
        this.uploadImage(tempFilePaths[0])
      }
    })
  },
  uploadImage(filePath) {
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: filePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: (res) => {
        const data = res.data
        console.log('上传成功', data)
      },
      fail: (err) => {
        console.error('上传失败', err)
      }
    })
  }
})

5. 处理服务器响应

在上传图片后，服务器通常会返回一些数据，比如图片的URL、上传状态等。我们可以根据服务器的响应进行相应的处理。

5.1 解析服务器响应

假设服务器返回的是 JSON 格式的数据，我们可以通过 JSON.parse 来解析：

success: (res) => {
  const data = JSON.parse(res.data)
  if (data.code === 200) {
    console.log('上传成功', data.url)
  } else {
    console.error('上传失败', data.message)
  }
}

5.2 显示上传结果

我们可以将上传结果显示在页面上，比如显示上传的图片URL：

Page({
  data: {
    imagePath: '',
    uploadResult: ''
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths
        this.setData({
          imagePath: tempFilePaths[0]
        })
        this.uploadImage(tempFilePaths[0])
      }
    })
  },
  uploadImage(filePath) {
    wx.uploadFile({
      url: 'https://example.com/upload',
      filePath: filePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: (res) => {
        const data = JSON.parse(res.data)
        if (data.code === 200) {
          this.setData({
            uploadResult: '上传成功，图片URL：' + data.url
          })
        } else {
          this.setData({
            uploadResult: '上传失败：' + data.message
          })
        }
      },
      fail: (err) => {
        this.setData({
          uploadResult: '上传失败：' + err.errMsg
        })
      }
    })
  }
})

在页面的 wxml 文件中，我们可以显示上传结果：

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

6. 总结

通过以上步骤，我们可以在微信小程序中实现拍照或从相册选取图片上传的功能。主要步骤包括：

1. 使用 wx.chooseImage API 选择图片。
2. 使用 wx.uploadFile API 上传图片到服务器。
3. 处理服务器响应并显示上传结果。

希望本文能帮助你顺利实现微信小程序中的图片上传功能。如果你有任何问题或建议，欢迎在评论区留言。