express-Node js函数结束前页面刷新

Question

我有以下功能，它适用于可以在几秒钟内上传的小文件，但对于大文件，页面刷新没有快速 js 上的 axios 发布请求结束。我正在使用 React Js 。 SO下面是客户端服务器反应js，它向同域中的端口9000发出axios请求

 function handleUpload (event)  {
    event.preventDefault();
    var language=props.selectedlan.selectedlan;
    var data = language === LAN_EN?jsonEN.deliverablePage:jsonGR.deliverablePage;
    
    if (projectName==='' || selectPerc === null) {
      setMessage(data.page.value16);
      return;
    }
    else if (!(selectPerc <=100 && selectPerc >=0)) {
      setMessage(data.page.value17);
      return;
    }
    else if (maxGrade < 0 ) {
      setMessage(data.page.value18);
      return;
    }
    setMessage('' );
    const dataFile = new FormData();
    dataFile.append('file', selectedFile);
    dataFile.append('id', props.loginsession.ID);
    dataFile.append('name', projectName);
    dataFile.append('startDate', selectedSDate);
    dataFile.append('finishDate', selectedFDate);
    dataFile.append('percentage', selectPerc);
    dataFile.append('max', maxGrade);
    dataFile.append('appear', checkedB);
    axios
      .post('http://10.16.33.114:9000/createDeliverable', dataFile, {
        onUploadProgress: (ProgressEvent) => {
          setloaded(Math.round(
            (ProgressEvent.loaded / ProgressEvent.total) * 100
          ));
        }
      }).then(    setselectedFile(null))
      .then(
        setMessage(data.page.value19))
.then(setTimeout(function(){ window.location.replace('/app/deliverables?createDeliverable=1'); }, 2000));
  };

下面我们可以看到调用axios post的express js中的Server端：

  fs.readdir(`${process.cwd()}/public/uploads/DeliverablesDocumentInfo/`, (err, files) => {
      con.getConnection(function(err, connection) {
        //Select all customers and return the result object:
        if(req.body.file !== 'null' ){

          let uploadFile = req.files.file;
          const name = uploadFile.name;
        
          con.query('INSERT INTO deliverables (Title,StartDate,FinishDate,Percentage, MaxGrade,Appear) VALUES (?,?,?,?,?,?)',[projectName,start, finish,percentage, max,appear], async function (err, result, fields) {
            connection.release();
  
            if (err) throw err;
          
            var insertedID = result.insertId;
            let ex = name.split(".")[1];
            const saveAs = insertedID+"." + ex;
          
            uploadFile.mv(`${process.cwd()}/public/uploads/DeliverablesDocumentInfo/${saveAs}`, function(err) {
             if (err) {
              // return res.status(500).send(err);
             }
             });
             con.query("UPDATE deliverables SET FileData = ? WHERE IDDeliverable = ?",[saveAs,insertedID], function (err, result) {
               if (err) throw err;
             });
        });
        }
        else{

            con.query('INSERT INTO deliverables (Title,StartDate,FinishDate,Percentage, MaxGrade,Appear) VALUES (?,?,?,?,?,?)',[projectName,start, finish,percentage, max,appear], async function (err, result, fields) {
                connection.release();
                if (err) throw err;      
            });
            }
      res.status(200);
    });

Answer 1

您应该将函数传递给then。您的代码在 post 启动时创建 2 秒超时，而不是在它完成时。

修正版：

function handleUpload (event)  {
    event.preventDefault();
    var language=props.selectedlan.selectedlan;
    var data = language === LAN_EN?jsonEN.deliverablePage:jsonGR.deliverablePage;
    
    if (projectName==='' || selectPerc === null) {
      setMessage(data.page.value16);
      return;
    }
    else if (!(selectPerc <=100 && selectPerc >=0)) {
      setMessage(data.page.value17);
      return;
    }
    else if (maxGrade < 0 ) {
      setMessage(data.page.value18);
      return;
    }
    setMessage('' );
    const dataFile = new FormData();
    dataFile.append('file', selectedFile);
    dataFile.append('id', props.loginsession.ID);
    dataFile.append('name', projectName);
    dataFile.append('startDate', selectedSDate);
    dataFile.append('finishDate', selectedFDate);
    dataFile.append('percentage', selectPerc);
    dataFile.append('max', maxGrade);
    dataFile.append('appear', checkedB);
    axios
      .post('http://10.16.33.114:9000/createDeliverable', dataFile, {
        onUploadProgress: (ProgressEvent) => {
          setloaded(Math.round(
            (ProgressEvent.loaded / ProgressEvent.total) * 100
          ));
        }
      })
      .then(() => setselectedFile(null))
      .then(() => setMessage(data.page.value19))
      .then(() => setTimeout(function(){ window.location.replace('/app/deliverables?createDeliverable=1'); }, 2000));
  };