使用 React.js 和 jQuery 更新带有预览的个人资料图片

介绍

为 Web 应用开发一个界面以允许用户上传图片通常意味着提供文件类型的输入元素以及预览用户从计算机中选择的图片的部分。本指南将介绍如何实现一个简单的 React.js 组件，该组件允许用户选择图片、预览图片并处理图片本身以通过 AJAX 调用提交。

设置

首先，创建一个维护两个状态的组件：一个用于图片本身，另一个用于预览的源 URL。接下来，您需要该组件呈现一个界面，其中包含用于文件选择的输入元素、用于图片预览的部分以及用于触发上传功能的按钮。PictureUploader 组件最初将如下所示：

      import React from 'react';
import $ from 'jquery';

export default class PictureUploader extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      picture: false,
      src: false
    }
  }

  render() {
    return (
      <div>
        <h5>Picture Uploader</h5>

        <input
          type="file"
        />
        <br/>
        <div>
          <p>
            No Preview
          </p>
        </div>
        <hr/>
        <button>
          Upload
        </button>
      </div>
    );
  }
}
    

维持的州

在组件的结构中，有两个状态值：

图片：对用户选择的图片文件的引用
src：图片预览的源 URL 的值

当组件创建时，这两个值最初都设置为false 。

用户界面

渲染的内容是一个包含三个主要部分的界面：

一个界面，允许用户从计算机中选择图片

      <input type="file"/>

用户选择图片时的预览部分。目前，它将在<p>元素中显示“无预览”。

      <p>
  No Preview
</p>
    

触发上传的按钮

      <button>
  Upload
</button>
    

图片文件选择

接下来，编写一个事件处理程序，每当用户选择要上传的图片时，该事件处理程序都会处理该图片。之后，创建另一个函数来处理图片的预览。如果没有选择图片，则返回“无预览”文本。否则，返回一个包含所选图片的 URL 的img HTML 标记。

事件处理函数

事件处理程序将提取文件图片并为预览创建 URL。将以下处理程序代码复制到您的组件：

      handlePictureSelected(event) {
  var picture = event.target.files[0];
  var src     = URL.createObjectURL(picture);

  this.setState({
    picture: picture,
    src: src
  });
}
    

此方法接受一个事件参数，其属性target表示此处理程序绑定到的输入元素。在本例中，文件类型的输入元素应具有属性files，其数据类型为数组。因此，要获取用户选择的文件，请引用数组的第一个元素：

      var picture = event.target.files[0];
    

src变量表示图片预览的 URL。您可以通过调用URL.createObjectURL()来创建它，它接受一个文件对象。这会创建一个附加到全局文档变量的临时 URL。这意味着如果刷新页面，您将丢失该 URL 引用。在本例中，文件对象是picture。

      var src = URL.createObjectURL(picture);
    

最后使用this.setState()更新组件的状态。

      this.setState({
  picture: picture,
  src: src
});
    

绑定到输入

将函数绑定到文件输入的onChange属性：

      <input
  type="file"
  onChange={this.handlePictureSelected.bind(this)}
/>
    

附加.bind(this)将允许this仍然保留其值，即使在handlePictureSelected方法中也引用组件的实例。

渲染预览

我们的预览部分是另一个包含if / else语句的函数的结果。它检查组件的状态src是否不为 false，这表示您有一个值。如果是，则返回包含源为src的img的 JSX 代码。否则，返回包含文本“无预览”的 JSX 代码。

      renderPreview() {
  if(this.state.src) {
    return (
      <img src={this.state.src}/>
    );
  } else {
    return (
      <p>
        No Preview
      </p>
    );
  }
}
    

在组件的render()方法中调用此方法，专门用于替换您最初的“无预览”文本。

      <div>
{this.renderPreview()}
</div>
    

触发上传

事件处理函数

创建一个名为upload方法的方法，其中包含来自jQuery的ajax()调用以执行上传。将以下代码复制到您的组件：

      upload() {
  var formData = new FormData();

  formData.append("file", this.state.picture);

  $.ajax({
    url: "/some/api/endpoint",
    method: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(response) {
      // Code to handle a succesful upload
    }
  });
}
    

请注意，您无需传递普通的 JavaScript 对象，而是创建FormData实例来嵌入图片对象。通过调用formData中的append来实现，该方法接受两个参数：

“file”：表示服务器要处理的参数键的字符串。
this.state.picture ：从state中提取的图片对象本身。

      var formData = new FormData();
formData.append("file", this.state.picture);
    

由于您在 AJAX POST调用中将FormData作为数据传递，因此您必须将cache、contentType和processData设置为 false。对于url，将“/some/api/endpoint”替换为您要上传图片的实际端点。

绑定到按钮

将上传事件处理程序绑定到按钮元素的onClick属性：

      <button
    onClick={this.upload.bind(this)}
  >
    Upload
  </button>
    

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

_查看原文