Naive UI 上传excel

业务上经常遇到上传excel,后端解析数据入库的场景.这里记录一下大致流程.

首先前端用 Naive UI 的上传组件, 限制xls格式,因为后端python用的xlrd库,不支持xlsx.

<n-upload
          ref="uploadRef"
          :default-upload="false"
          accept=".xls,application/ms-excel"
          :custom-request="batchUpload"
          :max="1"
        />

用户点击确认之后再调用上传函数, 上传文件要用到 formData() API

function handleSubmit() {
  uploadRef.value?.submit();
}
// 自定义上传函数
const batchUpload = async ({ file }) => {
  if (!file.name.endsWith(".xls"))
    return message.warning("请转换格式,另存为.xls文件后再上传", {
      duration: 5000,
    });

  const targetUrl =  "some_url";
  const formData = new FormData();
  formData.append("excel_file", file.file);
  formData.append("data", otherData);
  const data = await api.post(targetUrl, formData);
}

后端Django可以从 request.data中获取文件数据

    def api( request):
        file = request.data.get('excel_file')
        data = request.data.get('data')
        workbook = xlrd.open_workbook(file_contents=file.read())
        sheet = workbook.sheet_by_index(0)
        excel_errors: List[ExcelError] = []
        for row_idx in range(0, sheet.nrows):
            try:
                row = sheet.row_values(row_idx)
                parse(row)
            except Exception as e:
                excel_errors.append(ExcelError(row=row_idx + 1, message=str(e)))
        if len(excel_errors) == 0:
            return Response(asdict(ExcelResult(code='0')))
        return Response(asdict(ExcelResult(code='1', message='部分数据无法解析', data=excel_errors)))

为了用户体验,可以加入错误提醒,例如解析某一行出现问题时,返回行号和错误说明.

这套流程已经写了很多遍了,早已沉淀为体力活,状态不好的时候,就写写这样的代码,来保持手热.