upload上传本地图片（前后端）

首先我们先来配置后端:

第一步:在终端输入 npm i multiparty

​​npm i multiparty

第二步:在后端中创建一个upload文件夹,用来存放照片

  

第三步 在app.js文件中配置上传图片的虚拟路由以及路径

  

最后在项目中引入 multiparty

  

 这是图片上传的接口 可以参考   

  

上述就是后端总体的配置

接下来我们配置前端     

使用React vant组件来进行图片上传 以下是一个基本的代码 里面的内容可以自我修改

import React, { useState } from 'react';
import './Dong.less';
import { history } from 'umi';
import axios from 'axios';
import { upload, demoData } from './tem';
import { Toast } from 'antd-mobile';
import { Button, Input, Rate, Uploader, Form } from 'react-vant';
import { Cross, Exchange, Arrow } from '@react-vant/icons';
export default function Dong() {
  const handleUser = () => {
    history.push('/user');
  };
  const [form] = Form.useForm();
  const onFinish = async (values: any) => {
    console.log(values, 'form');
    let { data } = await axios.post('http://localhost:3000/adddong', values);
    history.push('/user');
    if (data.code == 200) {
      Toast.show({
        icon: 'success',
        content: data.msg,
      });
    }
  };

  return (
    <div className="Dong">
      <div className="Dong-Top">
        <span onClick={handleUser}>
          <Cross />
        </span>
        <span>
          <Exchange />
        </span>
        <span>
          <Arrow />
        </span>
      </div>
      <Form
        className="inp"
        colon
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button
              round
              nativeType="submit"
              type="primary"
              block
              style={{ border: '0' }}
            >
              提交
            </Button>
          </div>
        }
      >
        <Form.Item name="title" label="标题" className="inp1">
          <Input placeholder="标题" />
        </Form.Item>
        <Form.Item name="content" label="内容" className="inp2">
          <Input placeholder="内容" />
        </Form.Item>

        <Form.Item
          className="inp3"
          name="img"
          label="头像"
          rules={[{ required: true, message: '请选择文件' }]}
        >
          <Uploader upload={upload} />
        </Form.Item>
      </Form>
    </div>
  );
}