14、前端图片上传与文章编辑功能的实现与优化

前端图片上传与文章编辑功能的实现与优化

1. 创建 ImgUploader 组件

1.1 组件概述

我们将创建一个名为 ImgUploader 的组件，该组件会使用 react - s3 - uploader 库，此库可将文件上传操作抽象化，实现向 Amazon S3 的文件上传。在回调函数中，我们可以获取上传进度、错误信息以及上传完成后的文件位置等信息。

1.2 创建文件与导入依赖

首先，在项目的 src/components/articles 目录下创建 ImgUploader.js 文件：

$ [[you are in the src/components/articles directory of your project]]
$ touch ImgUploader.js

然后，在 ImgUploader.js 文件顶部添加以下导入语句：

import React from 'react'; 
import ReactS3Uploader from 'react-s3-uploader'; 
import {Paper} from 'material-ui'; 

class ImgUploader extends React.Component { 
  constructor(props)