如何在 React 中使用简单表单提交文件

2020-06-29 08:00:00 · 飞浪

介绍上传图片或文件是任何应用程序的主要功能。这是创建真正全栈应用程序的基本要求。例如，Facebook、Instagram和Snapchat都具有上传图片和视频的功能。在传统的HTM

介绍

上传图片或文件是任何应用程序的主要功能。这是创建真正全栈应用程序的基本要求。例如，Facebook、Instagram 和 Snapchat 都具有上传图片和视频的功能。

在传统的 HTML 网站中，文件上传表单会强制刷新页面，这可能会让用户感到困惑。此外，您可能希望自定义表单中文件输入的外观，以使其与您的整体应用设计产生共鸣。当涉及到这两个问题时，React 可以帮助您提供更好的用户体验。

本指南将帮助您在 React 中完成文件上传的操作。

创建基本表单

在您的 App.js 文件中，创建一个带有名称字段和文件输入的基本表单。

      import React from "react";

const App = () => {
  return (
    <div className="App">
      <form>
        <input type="text" />

        <input type="file" />
      </form>
    </div>
  );
};
    

现在，在组件中添加状态来存储名称和文件数据。

      import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");
  const [selectedFile, setSelectedFile] = useState(null);
  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <input
          type="file"
          value={selectedFile}
          onChange={(e) => setSelectedFile(e.target.files[0])}
        />
      </form>
    </div>
  );
};
    

创建自定义文件上传器组件

现在已经设置了基本表单，请创建一个自定义文件上传器组件，该组件可以在应用程序中的多个表单中重复使用。

如果您检查当前表单的输出，您会注意到文件输入的外观不太好；这是因为浏览器定义了其默认样式。在本节中，您将学习如何创建具有自定义样式的文件上传组件。

      const FileUploader = () => {
    const handleFileInput = () => {}

    return (
        <div className="file-uploader">
            <input type="file" onChange={handleFileInput}>
        </div>
    )
}
    

要创建自定义文件上传器，第一步是隐藏默认输入并使用ref触发更改事件。

      import React, {useRef} from 'react'

const FileUploader = ({onFileSelect}) => {
    const fileInput = useRef(null)

    const handleFileInput = (e) => {
        // handle validations
        onFileSelect(e.target.files[0])
    }

    return (
        <div className="file-uploader">
            <input type="file" onChange={handleFileInput}>
            <button onClick={e => fileInput.current && fileInput.current.click()} className="btn btn-primary">
        </div>
    )
}
    

您可以设置上传按钮的样式，使其与整个应用程序的主题相匹配。使用回调 prop 将上传的文件发送回父组件；在本例中，它是onFileSelect。在handleFileInput方法中，您可以执行验证，例如检查文件大小、文件扩展名等，并在此基础上，使用回调 prop（如onFileSelectSuccess和onFileSelectError）将反馈发送到父组件。

      const handleFileInput = (e) => {
  // handle validations
  const file = e.target.files[0];
  if (file.size > 1024)
    onFileSelectError({ error: "File size cannot exceed more than 1MB" });
  else onFileSelectSuccess(file);
};
    

将文件上传器组件添加到表单

添加文件上传器组件如下：

      import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");
  const [selectedFile, setSelectedFile] = useState(null);

  const submitForm = () => {};

  return (
    <div className="App">
      <form>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <FileUploaded
          onFileSelectSuccess={(file) => setSelectedFile(file)}
          onFileSelectError={({ error }) => alert(error)}
        />

        <button onClick={submitForm}>Submit</button>
      </form>
    </div>
  );
};
    

使用 FormData 上传文件

使用FormData对象上传选定的文件。使用formData对象的append方法附加名称和文件。

      const submitForm = () => {
  const formData = new FormData();
  formData.append("name", name);
  formData.append("file", selectedFile);

  axios
    .post(UPLOAD_URL, formData)
    .then((res) => {
      alert("File Upload success");
    })
    .catch((err) => alert("File Upload Error"));
};
    

差不多就是这样了。您已成功创建并添加了自定义文件上传组件。

结论

文件上传是任何 Web 应用的重要组成部分。您可以使用其他第三方库来创建自定义文件上传输入，但您应该清楚了解它们在后台是如何实现的。

在某些情况下，需要进行文件上传，但需要进行一些自定义。在这种情况下，第三方库可能并不总是能帮到您，但是您的自定义文件上传实用程序可以。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中使用简单表单提交文件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; const App = () => { return ( <div className="App"> <form> <input type="text" /> <input type="file" /> </form> </div> ); };

import React, { useState } from "react"; const App = () => { const [name, setName] = useState(""); const [selectedFile, setSelectedFile] = useState(null); return ( <div className="App"> <form> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <input type="file" value={selectedFile} onChange={(e) => setSelectedFile(e.target.files[0])} /> </form> </div> ); };

const FileUploader = () => { const handleFileInput = () => {} return ( <div className="file-uploader"> <input type="file" onChange={handleFileInput}> </div> ) }

import React, {useRef} from 'react' const FileUploader = ({onFileSelect}) => { const fileInput = useRef(null) const handleFileInput = (e) => { // handle validations onFileSelect(e.target.files[0]) } return ( <div className="file-uploader"> <input type="file" onChange={handleFileInput}> <button onClick={e => fileInput.current && fileInput.current.click()} className="btn btn-primary"> </div> ) }

const handleFileInput = (e) => { // handle validations const file = e.target.files[0]; if (file.size > 1024) onFileSelectError({ error: "File size cannot exceed more than 1MB" }); else onFileSelectSuccess(file); };

import React, { useState } from "react"; const App = () => { const [name, setName] = useState(""); const [selectedFile, setSelectedFile] = useState(null); const submitForm = () => {}; return ( <div className="App"> <form> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <FileUploaded onFileSelectSuccess={(file) => setSelectedFile(file)} onFileSelectError={({ error }) => alert(error)} /> <button onClick={submitForm}>Submit</button> </form> </div> ); };

const submitForm = () => { const formData = new FormData(); formData.append("name", name); formData.append("file", selectedFile); axios .post(UPLOAD_URL, formData) .then((res) => { alert("File Upload success"); }) .catch((err) => alert("File Upload Error")); };