图片上传实现步骤

图片上传实现流程：

（1）安装multiparty第三方模块，用于接收客户端上传的图片数据

//使用npm安装
npm install multiparty

//使用yarn安装
yarn add multiparty

（2）导入multiparty模块，定义一个图片上传的路由（上传方式必须是post请求）

（3）在项目目录下新建一个文件夹，作用是存放客户端上传过来的文件，配置静态资源访问目录

后端epress框架内容

//导入multiparty模块
var multiparty = require("multiparty")


router.post('/uploadimg',(req,res)=>{
  //定义一个multiparty类型的对象，接收客户端上传的数据
  let form = new multiparty.Form()
  //为表单对象定义一个上传文件的目标路径
  form.uploadDir='upload'
  //接收上传的文件
  form.parse(req,(err,a,imgData)=>{
    //可以将三个参数打印查看类型，其中imgData存放的是图片的信息
    //console.log(err);
    //console.log(a);
    //console.log(imgData);
    //将图片路径返回到客户端
    res.send({
      code:200,
      path:"http://localhost:3000/"+imgData.file[0].path
    })
  })
})

前端react框架内容

前端使用了组件库实现图片上传的效果，需要先安装antd组件库，注意要安装与官网相同的版本

npm install antd@5.23.0

 

import { Button, message, Upload } from 'antd';

export default function UploadImg() {
    const props = {
        //发到后台的文件参数名
        name: 'file',
        //上传的地址
        action: 'http://localhost:3000/uploadimg',
        //设置上传的请求头部，IE10 以上有效
        headers: {
            authorization: 'authorization-text',
        },
        //上传文件改变时的回调，上传每个阶段都会触发该事件
        onChange(info) {
            //file是当前操作的文件对象
            if (info.file.status !== 'uploading') {
                //上传成功
                //resopnse包含后端返回的数据
                console.log(info.file.response,"111");
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                //上传失败
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return <>
        <Upload {...props}>
            <Button>上传图片</Button>
        </Upload>
    </>
}