如何创建包含文件的简单表单提交

2020-02-05 08:00:00 · 飞浪

介绍 React是一个基于JavaScript的库，用于使用基于组件的架构创建出色的UI组件。所有功能都可以划分为通用组件，可在Web开发过程中随时重复使用。在Web开发中，文件上传功

介绍

React 是一个基于 JavaScript 的库，用于使用基于组件的架构创建出色的 UI 组件。所有功能都可以划分为通用组件，可在 Web 开发过程中随时重复使用。

在 Web 开发中，文件上传功能是大多数应用程序已经具备的常见功能，因此文件上传过程在不同应用程序之间可能略有不同。

文件上传通常用于上传文件，例如图像、文档（doc、pdf、xls等）、音频、视频和许多其他文件类型。

在本指南中，我们将学习如何通过 React 中的表单创建文件上传功能。

使用表单进行简单文件上传

我们可以快速创建一个带有提交按钮的简单表单来允许文件上传。我们只需要管理所选文件更改的事件。

文件上传的主要要求包括以下元素和配置。

Form 元素
类型为文件的输入控件
提交按钮提交表单
文件更改事件以获取更新的文件详细信息

这是直接配置文件上传的标准方式，我们也可以根据不同的需求有不同的实现方式。

让我们从一种简单的方法开始。下面是表单的代码片段。

      render() {
    return (
      <div>
        <h2>File upload using form in React</h2>
        <hr />
        <div>
          <form>
            <table>
              <tr>
                <td>Select File :</td>
              </tr>
              <tr>
                <input type="file" />
              </tr>
            </table>
          </form>
        </div>
      </div>
    );
  }
    

在此代码片段中，我们有表单元素，并且在表单元素内部，输入元素是一种文件类型，允许我们从单击文件上传控件时出现的文件对话框中选择文件。

但是这个表单不起作用，因为我们没有在单击文件时立即实现事件，所以我们不会将文件详细信息提交到服务器。我们应该有一个更改事件来解决这个问题。

      <form>
    <table>
        <tr>
            <td>Select File :</td>
        </tr>
        <tr>
            <input onChange={this.onFileChange} type="file" />
        </tr>
    </table>
</form>
    

除了文件输入外，我们还有一个名为onFileChange()的事件，用于获取最终用户最新选择的文件。最后，我们将获得所选文件的所有详细信息。

一旦文件发生改变，我们就实现改变事件，就像这样。

      onFileChange(e) {
    const file = e.target.files[0];
    console.log(file.name);
    console.log(file.size);
    console.log(file.type);
  }
    

在此事件中，我们获取事件对象，并通过使用e.target.file[0]，可以访问该文件以及所选文件的不同属性，例如文件的名称、大小和文件的类型。

这是包含表单的简单文件上传的完整代码片段。

      import React, { Component } from "react";

class Simplefileupload extends Component {
  constructor() {
    super();
    this.onFileChange = this.onFileChange.bind(this);
  }

  onFileChange(e) {
    const file = e.target.files[0];
    console.log(file.name);
    console.log(file.size);
    console.log(file.type);
  }

  render() {
    return (
      <div>
        <h2>File upload using form in React</h2>
        <hr />
        <div>
          <form>
            <table>
              <tr>
                <td>Select File :</td>
              </tr>
              <tr>
                <input onChange={this.onFileChange} type="file" />
              </tr>
            </table>
          </form>
        </div>
      </div>
    );
  }
}

export default Simplefileupload;
    

请记住，表单内没有任何按钮，但我们也可以使用表单内的提交按钮来实现 HTTP 调用，将文件发送到服务器。

使用简单表单上传多个文件

在上面的例子中，有一个输入类型为文件，但使用该文件上传，我们将无法一次选择多个文件。解决方案是添加一个名为multiple 的附加属性，允许我们选择多个文件。

我们需要像这样更新输入控件。

      <form>
    <table>
        <tr>
            <td>Select File :</td>
        </tr>
        <tr>
            <input onChange={this.onFileChange} type="file" multiple />
        </tr>
    </table>
</form>
    

并且为了访问多个文件，我们还需要修改更改事件，如下所示。

      // for multiple file
  onFileChange(e) {
    const file = e.target.files;
    console.log(file);
  }
    

如果您打开浏览器控制台，您将通过从文件对话框中选择多个文件来查看文件数组。这就是我们如何允许用户一次选择多个文件。

使用 Redux-form 上传文件

我们已经看到了使用<form>上传文件的简单方法，但是如果您必须在 React 中将redux-form与表单一起使用，则标准表单将不适合。

在这种情况下，您需要在 React 应用程序中设置 redux 以使redux-form正常工作。

安装

在开始示例之前，我们应该安装一些依赖项，如下所示。

      npm install redux
npm install react-redux
npm install redux-form
npm install axios
    

下一步是在我们的 React 应用中配置 redux 并创建一个名为store.js的新文件。代码片段应如下所示。

      import { createStore, combineReducers } from "redux";
import { reducer as reduxFormReducer } from "redux-form";

const reducer = combineReducers({
  form: reduxFormReducer
});
const store = createStore(reducer);

export default store;
    

我们使用方法createStore()创建了存储。该方法还有一个附加参数，reducer，用于包含 redux 表单的实例。

现在我们的存储对象已创建，我们将能够在我们的应用程序中使用redux-form。

下一步是使用 redux-form 配置在组件中创建表单。基本结构如下所示。

      import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";

class Fileuploadtoserver extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  renderInput = ({ input, type, meta }) => {
    const { mime } = this.props;
    return (
      <div>
        <input
          name={input.name}
          type={type}
          accept={mime}
          onChange={event => this.handleChange(event, input)}
        />
      </div>
    );
  };

  handleChange = (event, input) => {
    event.preventDefault();
    let imageFile = event.target.files[0];
    if (imageFile) {
      const localImageUrl = URL.createObjectURL(imageFile);
      const imageObject = new window.Image();

      imageObject.onload = () => {
        imageFile.width = imageObject.naturalWidth;
        imageFile.height = imageObject.naturalHeight;
        input.onChange(imageFile);
        URL.revokeObjectURL(imageFile);
      };
      imageObject.src = localImageUrl;
    }
  };

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <h2>File upload to server using redux-form in React</h2>
        <hr />
        <div>
          <form onSubmit={handleSubmit(this.onFormSubmit)}>
            <table>
              <tr>
                <td>Select File :</td>
              </tr>
              <tr>
                <td>
                  <Field
                    name="image"
                    type="file"
                    component={this.renderInput}
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <button type="submit">Submit</button>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    );
  }
}

export default reduxForm({
  form: "myfileupload"
})(Fileuploadtoserver);
    

让我们看看到目前为止我们在这个组件中实现了什么。

带有 redux-form 提交事件的表单
<Filed>元素是 redux-form 的一部分，它使用通用函数renderInput()将输入类型呈现为文件
一个输入文件更改事件，获取文件详细信息，并根据详细信息创建新的图像对象以及宽度和高度等不同的键
reduxForm ()方法，用于初始化 redux-form，并附加一个名为form 的属性，用于标识表单的名称。

我们已经配置了除表单提交事件之外的所有必需的配置，因此一旦我们更改文件，所有细节都将为所选文件配置。

表单提交事件称为onFormSubmit()，如下所示。

      onFormSubmit = data => {
    let formData = new FormData();
    formData.append("name", data.image.name);
    formData.append("image", data.image);
    const config = {
      headers: { "content-type": "multipart/form-data" }
    };
    const url = "API_URL";
    post(url, formData, config)
      .then(function(response) {
        console.log("FILE UPLOADED SUCCESSFULLY");
      })
      .catch(function(error) {
        console.log("ERROR WHILE UPLOADING FILE");
      });
  };
    

该方法包含Axios POST请求，用于将选定的文件作为请求数据以FormData()的形式发送到服务器。

注意：在使用 Axios 包之前，我们需要像这样导入该包。

从“axios”导入{post}；

现在，如果您通过更改 API_URL 来运行此示例，我们将能够毫无问题地将图像数据发送到服务器。

上传前验证文件

在处理文件上传时，我们可能需要在验证方面进行一些限制。例如，如果不满足特定条件，我们可能会限制文件上传。

因此，我们需要在文件进入服务器之前对其进行验证。假设我们必须根据大小限制文件。我们可以实现这样的简单功能。

      <code

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

_查看原文

技术指南

React框架

阅读全文

如何创建包含文件的简单表单提交

杭州电子商务研究院

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

render() { return ( <div> <h2>File upload using form in React</h2> <hr /> <div> <form> <table> <tr> <td>Select File :</td> </tr> <tr> <input type="file" /> </tr> </table> </form> </div> </div> ); }

<form> <table> <tr> <td>Select File :</td> </tr> <tr> <input onChange={this.onFileChange} type="file" /> </tr> </table> </form>

import React, { Component } from "react"; class Simplefileupload extends Component { constructor() { super(); this.onFileChange = this.onFileChange.bind(this); } onFileChange(e) { const file = e.target.files[0]; console.log(file.name); console.log(file.size); console.log(file.type); } render() { return ( <div> <h2>File upload using form in React</h2> <hr /> <div> <form> <table> <tr> <td>Select File :</td> </tr> <tr> <input onChange={this.onFileChange} type="file" /> </tr> </table> </form> </div> </div> ); } } export default Simplefileupload;

<form> <table> <tr> <td>Select File :</td> </tr> <tr> <input onChange={this.onFileChange} type="file" multiple /> </tr> </table> </form>

import { createStore, combineReducers } from "redux"; import { reducer as reduxFormReducer } from "redux-form"; const reducer = combineReducers({ form: reduxFormReducer }); const store = createStore(reducer); export default store;

import React, { Component } from "react"; import { Field, reduxForm } from "redux-form"; class Fileuploadtoserver extends Component { constructor() { super(); this.state = { name: "React" }; } renderInput = ({ input, type, meta }) => { const { mime } = this.props; return ( <div> <input name={input.name} type={type} accept={mime} onChange={event => this.handleChange(event, input)} /> </div> ); }; handleChange = (event, input) => { event.preventDefault(); let imageFile = event.target.files[0]; if (imageFile) { const localImageUrl = URL.createObjectURL(imageFile); const imageObject = new window.Image(); imageObject.onload = () => { imageFile.width = imageObject.naturalWidth; imageFile.height = imageObject.naturalHeight; input.onChange(imageFile); URL.revokeObjectURL(imageFile); }; imageObject.src = localImageUrl; } }; render() { const { handleSubmit } = this.props; return ( <div> <h2>File upload to server using redux-form in React</h2> <hr /> <div> <form onSubmit={handleSubmit(this.onFormSubmit)}> <table> <tr> <td>Select File :</td> </tr> <tr> <td> <Field name="image" type="file" component={this.renderInput} /> </td> </tr> <tr> <td> <button type="submit">Submit</button> </td> </tr> </table> </form> </div> </div> ); } } export default reduxForm({ form: "myfileupload" })(Fileuploadtoserver);

onFormSubmit = data => { let formData = new FormData(); formData.append("name", data.image.name); formData.append("image", data.image); const config = { headers: { "content-type": "multipart/form-data" } }; const url = "API_URL"; post(url, formData, config) .then(function(response) { console.log("FILE UPLOADED SUCCESSFULLY"); }) .catch(function(error) { console.log("ERROR WHILE UPLOADING FILE"); }); };