图片上传实现步骤

图片上传实现步骤

引用

CSDN

1.

https://blog.csdn.net/hpxjiayou/article/details/145061144

本文将详细介绍如何实现图片上传功能，包括后端使用Express框架和前端使用React框架的具体实现步骤。通过本文的学习，读者可以掌握图片上传功能的实现方法，为开发相关应用提供参考。

后端实现步骤

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

//使用npm安装
npm install multiparty
//使用yarn安装
yarn add multiparty

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

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

//导入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
    })
  })
})

前端实现步骤

前端使用了组件库实现图片上传的效果，需要先安装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>
    </>
}

通过以上步骤，可以实现一个简单的图片上传功能。前端通过antd组件库实现图片上传的界面和交互，后端通过multiparty模块接收并处理上传的图片数据，最后将图片保存到指定的目录并返回图片的访问路径。