uni-app 没办法上传身份证照片

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

uni-app 没办法上传身份证照片

怎么解决

2 回复

做一个开关,上架后在打开上传身份证照片


在处理 uni-app 上传身份证照片的问题时,通常我们需要考虑前端页面如何让用户选择照片文件,以及后端接口如何处理这些文件上传。以下是一个简化的代码示例,展示了如何在 uni-app 中实现文件上传功能,特别是针对身份证照片的上传。

前端(uni-app)代码示例

首先,确保你的页面布局中有一个文件选择器(<input type="file"> 在 H5 中使用,而在小程序或 App 中使用 uni-app 提供的 <picker-mode="files"> 组件或其他文件选择组件)。

1. 页面布局(示例为 H5 环境)

<template>
  <view>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <button @click="uploadFile">上传</button>
  </view>
</template>

2. 脚本部分

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      if (!this.file) {
        uni.showToast({ title: '请先选择文件', icon: 'none' });
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await uni.uploadFile({
          url: 'https://your-server-url/upload', // 替换为你的后端接口地址
          filePath: this.file.path,
          name: 'file',
          formData: formData, // 如果后端需要其他参数,可以在这里添加
          success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes);
          },
          fail: (err) => {
            console.error('上传失败', err);
          },
        });
      } catch (error) {
        console.error('上传过程中发生错误', error);
      }
    },
  },
};
</script>

后端代码示例(以 Node.js + Express 为例)

后端需要处理文件上传请求,并将文件保存到服务器或云存储中。

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));
  },
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('文件上传成功');
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

确保后端服务器正确配置 CORS(跨域资源共享),以便 uni-app 前端能够成功请求。以上代码仅作为示例,实际应用中需要根据具体需求进行调整,比如文件大小限制、文件类型校验、错误处理等。

回到顶部