如何实现手机端选中通讯录内容上传至Django应用的功能？

前端实现（核心为唤起通讯录权限与读取联系人数据） #

• 采用W3C标准的Contact Picker API实现系统通讯录唤起能力，当前Chrome for Android 80+、Safari on iOS 14.5+ 等主流移动端浏览器均支持该接口，无需额外引入第三方依赖
• 前端核心逻辑代码示例：

// 上传按钮点击事件绑定
document.querySelector('#uploadContactBtn').addEventListener('click', async () => {
  // 前置校验浏览器兼容性
  if (!('contacts' in navigator)) {
    alert('当前浏览器不支持通讯录读取功能，请升级后重试')
    return
  }
  try {
    // 定义需要获取的联系人字段，可选值包含name、tel、email、address、icon
    const requiredFields = ['name', 'tel']
    // multiple设为true即支持多选联系人
    const selectConfig = {multiple: true}
    // 唤起系统原生通讯录选择面板
    const selectedContacts = await navigator.contacts.select(requiredFields, selectConfig)
    // 组装数据提交到Django后端
    const formData = new FormData()
    formData.append('contacts', JSON.stringify(selectedContacts))
    // 发起POST请求
    const submitRes = await fetch('/api/upload-contacts/', {
      method: 'POST',
      headers: {
        'X-CSRFToken': getCsrfToken('csrftoken') // Django请求必须携带CSRF凭证
      },
      body: formData
    })
    if (submitRes.ok) {
      alert('通讯录上传成功')
    }
  } catch (err) {
    console.error('通讯录读取失败', err)
    alert('未获得通讯录读取权限，无法完成上传')
  }
})

// 辅助函数：从cookie提取CSRF Token
function getCsrfToken(name) {
  let token = null
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';')
    for (let i = 0; i < cookies.length; i++) {
      const item = cookies[i].trim()
      if (item.substring(0, name.length + 1) === `${name}=`) {
        token = decodeURIComponent(item.substring(name.length + 1))
        break
      }
    }
  }
  return token
}

• 注意：Contact Picker API 仅支持HTTPS环境调用，本地开发用localhost可正常调试，生产环境必须部署HTTPS。

后端Django接口实现 #

• 视图层接收逻辑示例（FBV写法，FBV/FBV可根据自身项目习惯调整）：

import json
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods

@require_http_methods(["POST"])
def upload_contacts(request):
    # 解析前端提交的联系人数据
    try:
        contacts = json.loads(request.POST.get('contacts', '[]'))
    except json.JSONDecodeError:
        return JsonResponse({'code': 400, 'msg': '数据格式异常'}, status=400)
    
    # 自定义业务逻辑：将联系人数据入库/处理
    for item in contacts:
        # 示例取第一个姓名和第一个手机号，可按需扩展其他字段
        contact_name = item.get('name', [''])[0]
        contact_phone = item.get('tel', [''])[0]
        # 对应你的业务模型写入逻辑，示例：
        # Contact.objects.create(user=request.user, name=contact_name, phone=contact_phone)
    
    return JsonResponse({'code': 200, 'msg': '上传成功'})

• 路由配置（urls.py）：

from django.urls import path
from . import views

urlpatterns = [
    # 其他项目路由
    path('api/upload-contacts/', views.upload_contacts, name='upload_contacts'),
]

低版本浏览器兼容方案 #

如需适配不支持Contact Picker API的旧设备，可做降级处理：引导用户导出通讯录为vCard（.vcf）格式文件，前端用input type="file" accept=".vcf"实现文件上传，后端通过vobject第三方库解析vcf文件提取联系人信息即可。

内容的提问来源于stack exchange，提问作者giaggi