Express.js - 如何在将数据插入数据库后重新加载页面

Question

我是 node/express 的新手，我一直被我的问题困扰 - 我有一个带有文件输入 (xlsx) 的表单 - 在读取文件并将其序列化后，我通过 axios 将其发送到后端。

这是我用来读取 excel 文件并将其发送到给定端点的部分：

const inputXLSX = document.querySelector('#inputXLSX');
const submitXLSX = document.querySelector('#submitXLSX');

let selectedFile;

const readXLSXtoJSON = (file) => {

return new Promise((resolve, reject) => {

if(!file) reject(Error('Wystąpił błąd podczas pobierania pliku'));

    let fileReader = new FileReader();
        fileReader.readAsBinaryString(file);
        fileReader.onload = (event) => {
            const data = event.target.result;
            const workbook = XLSX.read(data, {type: 'binary'});
            let rowObj;
            workbook.SheetNames.forEach(sheet => {
                rowObj = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);  
            });
            resolve(JSON.stringify(rowObj));
        }
})
}

if (inputXLSX) {
    inputXLSX.addEventListener('change', (event)=>{
        event.preventDefault();
        selectedFile = event.target.files[0];
        })  
}

if (submitXLSX) {
    submitXLSX.addEventListener('click', async (event)=>{
        event.preventDefault();
        try {
            const XLSXdata = await readXLSXtoJSON(selectedFile);
            if (XLSXdata) {
                axios.post('http://localhost:3000/api/1.0/tokens', {
                    XLSXdata
                  })
            }
        } catch (err) {
            console.log(Error);
            }
       })
}

中间件函数-仅用于向数据库插入数据或return状态'fail'

exports.importToken = async (req, res, next) => {
  try {
    Token.insertMany(JSON.parse(req.body.XLSXdata));
  } catch (err) {
    return res.status(400).json({
      status: 'fail',
      message: 'Wystąpił bład podczas zapisywania tokenów do bazy',
    });
  }
  next();
};

中间件堆栈中的最终函数：

exports.showToken = async (req, res) => {
  const newTokensList = JSON.parse(req.body.XLSXdata);
  res
    .json({
      status: 'success',
      data: newTokensList,
    })
    .redirect(301, '/admin/tokens');
};

在return中我得到 UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are send to the client

Answer 1

一种选择是redirect响应：

res
  .json({
    status: 'success',
    data: newTokensList,
  })
  .redirect(301, '/page_you_want'); // Here!

Answer 2

这个问题的解决方案不是创建任何中间件，而是简单地：

等待 axios post 请求
添加 preventDefault() 以防止提交表单。

添加window.location.reload()

    submitXLSX.addEventListener('click', async (event) => {
        event.preventDefault();
        try {
            const XLSXdata = await readXLSXtoJSON(selectedFile);
            await axios.post('http://localhost:3000/api/1.0/tokens', { XLSXdata });
            window.location.reload(true);

        } catch (err) {
            console.log(Error);
        }
    })
}

Express.js - 如何在将数据插入数据库后重新加载页面

Express.js - how to reload page after inserting data to the database

node.js

express

pug