react 实现图片上传功能

首先我们需要进入ant-design文档中，找到upload组件

import React from "react";
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        <Upload
          action={`${HOST}:${PORT}/goods/upload`}  //和后台接口对应一致，这是我自己的接口，大家自行设置
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }
}

这样一个简单的上传页面就能看到了

那么接下来如何实现将图片发送到后台服务器？

第一步：下载connect-multiparty组件
第二步： 导入上传中间件并创建上传中间件对象

const multiparty = require('connect-multiparty'); 
const multipartyMiddleWare = multiparty(); 

图上上传接口：goodsapi.js

/*
   图片上传接口：http://localhost:8089/goods/upload
*/
router.post('/upload',multipartyMiddleWare,(req, res) => {
    //输出上传文件的名称(测试)
    console.log("上传文件名:",req.files.photoContent.name)
    //获取上传文件
    let file = req.files.photoContent;   //将上传文件保留在临时文件中
    //设置上传文件的保存位置
    let desc_dir = path.join(__dirname+'../../../public/images')+'\\'+file.originalFilename
    console.log("保存路径：",desc_dir)
    //将临时文件中的数据复制到保存位置
    fs.readFile(file.path,function (err,data) {
        fs.writeFile(desc_dir,data,function (err) {
            if (err){
                console.log(err)
                res.json({
                    code: 1002,
                    msg: '写入文件失败'
                })
            }
        })
    })

    //将上传图片的存储路径响应给客户端
    res.json({
        code: 1000,
        ImgPath: `http://localhost:8089/images/${file.originalFilename}`//网络访问时，public是虚拟目录，不需要写出来
    })
})

图片上传成功后在后台服务器能呈现出来文件名