React上传图片

使用vant组件

import React, { FC, useState } from 'react';
import '@/pages/golobo.less';
import 'lib-flexible';
import './index.less';
import { LeftOutline } from 'antd-mobile-icons';
import { history } from 'umi';
import { Button, Input, Rate, Uploader, Form } from 'react-vant';
import { upload, demoData } from './temp';
import axios from 'axios';
import { Toast } from 'antd-mobile';
export default function index() {
  const [form] = Form.useForm();
  const onFinish = async (values: any) => {
    console.log(values, 'form');
    let { data } = await axios.post('/api/gj/addFunctionSugg', values);
    if (data.code == 200) {
      Toast.show({
        icon: 'success',
        content: data.msg,
      });
      history.push('/feedback');
    }
  };

  return (
    <div className="FunctionSuggestion">
      <div className="top">
        <div className="backBtn">
          <LeftOutline
            fontSize={12}
            onClick={() => history.push('/feedback')}
          />
        </div>
        <div className="title">功能异常反馈</div>
      </div>

      <Form
        colon
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button
              round
              nativeType="submit"
              type="primary"
              block
              style={{ background: 'rgb(67, 183, 43)', border: '0' }}
            >
              提交
            </Button>
          </div>
        }
      >
        <Form.Item name="title" label="标题">
          <Input placeholder="问题概述、类型" />
        </Form.Item>

        <Form.Item name="rate" label="评分" initialValue={3}>
          <Rate />
        </Form.Item>

        <Form.Item name="detail" label="问题描述">
          <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
        </Form.Item>

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


.FunctionSuggestion {
  height: 100%;
  width: 100%;
  .top {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    background-color: #f2f2f2;

    .backBtn {
      font-weight: bolder;
    }
    .title {
      font-weight: bolder;
      flex: 1;
      text-align: center;
    }
  }
}


//temp.tsx

// 实际业务中需要自己实现对应上传逻辑
export const upload = async (file: File) => {
  try {
    const body = new FormData();
    body.append('source', file);
    const resp = await fetch('/api/ljr/img', {
      method: 'POST',
      body,
    });
    const json = await resp.json();
    // return包含 url 的一个对象 例如: {url:'https://img.yzcdn.cn/vant/sand.jpg'}
    return { url: 'http://localhost:3000/' + json.imgurl };
  } catch (error) {
    return { url: `demo_path/${file.name}` };
  }
};

export const demoData = [
  {
    url: 'https://img.yzcdn.cn/vant/sand.jpg',
    filename: '图片名称',
  },
  {
    url: 'https://img.yzcdn.cn/vant/tree.jpg',
    filename: '图片名称',
  },
];


//接口
// 图片上传
router.post('/img',async(req,res)=>{
  let form = new multiparty.Form()
form.uploadDir = "upload"//在服务器下创建一个upload目录
form.parse(req,(err,data,files)=>{
  console.log(files,'图片信息')
  
  // 表示上传的图片信息
  // data 表示提交的其它表单数据
  res.send({
    imgurl:files["source"][0].path
  })     
})
})


//添加功能建议接口
router.post('/addFunctionSugg',async(req,res)=>{
    let body=req.body
    await functionSuggestionModule.create({
        title:body.title,
        rate:body.rate,
        img:body.img[0].url,
        detail:body.detail
    })

    res.send({
      code:200,
      msg:'添加功能建议成功'
    })
})