uni-app 实现类似上传身份证功能 保存照片

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 实现类似上传身份证功能 保存照片

  1. 界面首先有一个输入框(YYY为输入内容)，用户输入名称后进行下一步
  2. 界面上有很多拍照上传按钮
  3. 点击相应按钮将转到系统相机进行拍照
  4. 拍照完成后会按照按钮对应名称对照照片进行命名（YYY-XXXX）
  5. 最后所有照片拍完后所有照片保存在本地手机中（按照第一步中输入框中输入内容创建文件夹保存）
  6. 点击按钮可以进入文件夹查看拍照内容

文件保存内容为
./YYY/YYY-a1
./YYY/YYY-a2
…

查看图片可看到UI设计示例 >>>

UI设计示例


Harmonyos Next教程
2 回复

原生插件开发 Q 592944557


在 uni-app 中实现类似上传身份证功能并保存照片，通常涉及以下几个步骤：选择图片、预览图片、上传图片以及保存图片路径到服务器或本地存储。下面是一个简单的代码示例，展示了如何实现这些功能。

1. 选择图片

使用 uni.chooseImage API 来选择图片：

uni.chooseImage({
  count: 1, // 只允许选择一张图片
  sizeType: ['original', 'compressed'], // 可以选择原图或压缩后的图片
  sourceType: ['album', 'camera'], // 可以从相册选择或拍照
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    // tempFilePaths 是选定图片的本地文件路径列表
    console.log('Selected Image:', tempFilePaths[0]);
    this.previewImage(tempFilePaths[0]);
    this.uploadImage(tempFilePaths[0]);
  },
  fail: (err) => {
    console.error('Failed to choose image:', err);
  }
});

2. 预览图片

使用 uni.previewImage API 来预览图片：

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

3. 上传图片

假设你有一个后端接口来接收图片上传，可以使用 uni.uploadFile API：

uploadImage(filePath) {
  const uploadUrl = 'https://your-server.com/upload'; // 替换为你的上传接口
  const formData = {
    file: filePath,
    // 其他可能的参数，比如用户ID等
    userId: '123456'
  };

  uni.uploadFile({
    url: uploadUrl,
    filePath: filePath,
    name: 'file',
    formData: formData,
    success: (uploadRes) => {
      const data = JSON.parse(uploadRes.data);
      // data 通常包含服务器返回的上传结果，比如图片路径等
      console.log('Upload Success:', data);
      // 你可以将返回的图片路径保存到本地或数据库
      this.saveImagePath(data.imagePath);
    },
    fail: (err) => {
      console.error('Failed to upload image:', err);
    }
  });
}

4. 保存图片路径

这里假设你只是想在本地保存图片路径（实际应用中可能保存到数据库）：

saveImagePath(imagePath) {
  // 你可以使用 uni.setStorageSync 或其他持久化方法保存数据
  uni.setStorageSync('identityImagePath', imagePath);
  console.log('Image Path Saved:', imagePath);
}

以上代码展示了如何在 uni-app 中实现上传身份证功能并保存照片路径。根据实际需求，你可能需要调整接口地址、参数名称等。

回到顶部