react批量上传

最新推荐文章于 2024-07-17 17:28:45 发布

小阳睡不醒

最新推荐文章于 2024-07-17 17:28:45 发布

阅读量537

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/m0_70730767/article/details/129176876

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该文章介绍了如何在React前端和Node.js后端实现Excel文件的批量上传。后端使用Node.js处理文件上传，解析Excel数据并存储到数据库，前端则借助antd库进行文件上传，上传成功或失败会有相应的反馈提示。

摘要由CSDN通过智能技术生成

react批量上传

一、后端接口（node）

router.post("/excelUpload", (req, res) => {
    const form = new multiparty.Form()   //multiparty需要导入
    form.uploadDir = "upload"
    form.parse(req, async (err, formData, excelData) => {
        let dataUrl = excelData.file[0].path
        let data = xlsx.parse(dataUrl)[0].data    //xlsx需要导入
        let brr = []  //存放数据的数组
        data.forEach(item => {
            brr.push({     //这里是相关的字段
                "name": item[0],
                "depart": item[1],
                "starttime": item[2],
                "endtime": item[3],
                "desclist": item[2]
            })
        })
        brr.forEach(async(item)=>{
            await peoplegoModel.create(item)    //peopleModel是数据模型，
                                                //create加入数据库中
        })
    })
})

二、react前端

代码如下（示例）：

<Upload {...props}>
            <Button icon={<UploadOutlined />}>批量上传</Button>
          </Upload>

  const props = {
    name: 'file',
    action: 'http://127.0.0.1:7777/excelUpload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };