时间戳

首页 > 解决方案 > reactjs - 如何在没有提交按钮的情况下上传文件

javascript - reactjs - 如何在没有提交按钮的情况下上传文件

问题描述

我有一个输入和提交按钮，用于通过 axios 和 multer 上传多个文件。它可以工作，但我想在没有提交按钮的情况下上传我的文件。所以它应该在我选择我的文件后立即上传它们。

这些是代码......我尝试使用回调方法，但无法弄清楚语法应该如何。上传函数后有没有办法调用uploadHandler函数。我不能简单地合并它们，因为状态给了我未定义的价值。* 我使用功能组件而不是类

function upload  (e)  {

const inputArr = new Array()

Array.from(e.target.files).forEach((piece)=>{

inputArr.push(piece.name)

}) 

setInputArray({inputArray: inputArr})
setInputFiles({inputFiles:e.target.files})

}

在此之后，这应该运行

function uploadHandler  () {

const fd = new FormData();

if(inputFiles!=null)
{
  for ( var element of inputFiles.inputFiles) {
    console.log(element)
    fd.append('file',element)
  }
}

axios.post('/upload', fd)
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
}

我用这些调用它们

 <input type="file" id="file" name="file" multiple="multiple" onChange={upload}/>
   <button onClick={uploadHandler}>Send Files</button>

标签： javascriptreactjs

解决方案

由于设置 setInputArray({inputArray: inputArr}) 时数组状态不会立即更新，因此直接调用 uploadHandler 会使数组为空。

要实现这一点，您需要 useEffect ！

 import React, { useState, useEffect } from 'react';

useEffect(() => {
   uploadHandler(inputFiles); 
}, [inputFiles]);

并且您必须将您的 uploadHandler 函数声明修改为：

function uploadHandler(files) {

  let fd = new FormData();  // can't be a const if you want to add some key:value

  if(files!=null)
  {
    for ( var element of files.inputFiles) {
      console.log(element)
      fd.append('file',element)
    }    
    axios.post('/upload', fd)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  else
  {
    console.log("Nothing to upload");
  }
}

推荐阅读