一、使用微信小程序API获取图片

1. 选择图片

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths;
    // 这里可以进行后续处理，比如显示图片预览等
  }
});

2. 图片预览

wx.previewImage({
  current: tempFilePaths[0], // 当前显示图片的http链接
  urls: tempFilePaths // 需要预览的图片http链接列表
});

二、图片上传

1. 创建上传任务

首先，创建一个上传任务。可以使用wx.uploadFile API。

wx.uploadFile({
  url: 'https://example.com/upload', // 上传接口
  filePath: tempFilePaths[0], // 选择图片返回的相对路径
  name: 'file', // 服务器端参数名
  formData: {
    'user': 'test'
  },
  success: function (res) {
    var data = JSON.parse(res.data);
    // 这里可以处理服务器返回的数据，比如图片上传成功后的处理
  }
});

2. 上传进度监听

为了提升用户体验，可以在上传过程中显示进度条。可以使用wx.onUploadProgress API监听上传进度。

wx.onUploadProgress({
  success: function (res) {
    // 返回的是上传进度信息，可以用来更新进度条等
  }
});

三、总结