reactjs 从react上传文件到 flask 时出现Axios错误

avkwfej4 于 2022-12-12 发布在 React

关注(0)|答案(3)|浏览(160)

我尝试从React上传CSV文件到我的Flask后端。我的代码如下所示。使用下面的代码，Flask返回400（Axios错误）。
当我将 flask 更改为print(request.files)时，它打印ImmutableDict([])，并且它似乎没有任何数据（我认为是这样的..）
错误：

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpReques

App.js:

let handleSubmit = async (e) => {
        e.preventDefault()
        let file = csvFile
        const formData = new FormData()

        formData.append("file", file)

        axios
            .post("http://127.0.0.1:5000/reactTest", formData)
            .then((res) => console.log(res))
            .catch((err) => console.warn(err))

...

<input 
type='file'
value={csvFile}
name='csvFile'
/>
<button type='submit' onClick={handleSubmit}></button>

api.py:

@app.route('/reactTest', methods=['POST'])
def reactTest():
    if request.method == 'POST':
        # print(request.files)
        print(request.files['file'])
        return {'status': 200}

reactjs

来源：https://stackoverflow.com/questions/74719243/axios-error-on-file-upload-from-react-to-flask

3条答案

按热度按时间

z31licg01#

<input type="file">不能是受控组件，因为由于浏览器安全限制，您无法设置value。
您甚至可以将一个HTMLFormElement传递到FormData来捕获所有的输入。

const [hasFiles, setHasFiles] = useState(false);

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target); // pass the entire form

  try {
    console.log(await axios.post("http://127.0.0.1:5000/reactTest", formData));
  } catch (err) {
    console.warn(err.toJSON());
  }
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="file"
      name="file"
      onChange={(e) => setHasFiles(e.target.files.length > 0)}
    />
    <button type="submit" disabled={!hasFiles}>
      Submit
    </button>
  </form>
);

请注意，文件输入的名称现在是 “file”，以匹配您在FormData中所需的字段。

赞(0）回复(0）举报 2022-12-12

kzmpq1sx2#

要得到一个输入的文件.你需要使用（注意你需要指定输入索引）：

let file = e.target[0].files

如果您要取得dict而非可变更的dict，请使用'to_dict（）'

request.files['file'].to_dict()

赞(0）回复(0）举报 2022-12-12

h7wcgrx33#

您需要为请求指定Content-Type: multipart/form-data标头，以便将其识别为包含文件：

let handleSubmit = async (e) => {
    e.preventDefault()
    let file = e.target.files[0];
    const formData = new FormData()

    formData.append("file", file)

    axios
        .post("http://127.0.0.1:5000/reactTest", formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        })
        .then((res) => console.log(res))
        .catch((err) => console.warn(err))

...

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 从react上传文件到 flask 时出现Axios错误

3条答案

相关问题

热门标签

最新问答