express +react+ts+antd+oss上传

const express = require("express");
const cors = require("cors"); // 跨域的插件
const app = express();
const fs = require("fs");
const OSS = require("ali-oss");
const path = require("path");
const multer = require("multer"); // multer 用来解析fromData 格式的数据
// 使用multer  ，//这个插件是使用formData 格式的时候 引用的
app.use(cors()); // 打开跨域插件

const storage = multer.diskStorage({
  // 这个是解析文件名和将要存储的路径
  destination: function (req, file, cb) {
    cb(null, "./public/uploads");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + Math.round(Math.random() * 1e9);
    cb(null, file.fieldname + uniqueSuffix + path.extname(file.originalname));
  },
});
const upload = multer({ storage });
// LTAI5tLTTxNQceAFM9ke8QT9
// y804FY8Z8nK0KDV69DC2aDCcLIAPBa
const client = new OSS({
  accessKeyId: "******",
  accessKeySecret: "******",
  bucket: "******",
  region: "oss-cn-beijing",
  // endpoint: "oss-cn-beijing.aliyuncs.com",
});

// 后台向阿里云上传所调用的接口
app.post("/api/upload", upload.single("file"), async (req, res) => {
  //   console.log(req.file, "req.file");
  let result;
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
    result = await client.put(
      req.file.filename,
      path.normalize(
        path.join(__dirname, "/public/uploads/", req.file.filename)
      )
    );
    res.json({
      code: 200,
      data: result,
      msg: "上传成功",
    });
  } catch (e) {
    console.log(e, "e");
    res.json({
      code: 500,
      msg: "上传失败，服务器错误",
    });
  } finally {
    await fs.unlinkSync(req.file.path);
  }
  //   console.log(result, "result");
  //   res.end({
  //     code: 200,
  //   });
});

app.listen(7002, () => {
  console.log("running on port  7002");
});

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import { message, Upload } from 'antd'
import type { UploadChangeParam } from 'antd/es/upload'
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface'
import axios from 'axios'
import React, { useState } from 'react'

const App: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState<string>()

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
    //这个函数是上传响应成功后才执行的内容
    if (info.file.status === 'uploading') {
      setLoading(true)
      return
    }
    console.log('Upload file', info.file.originFileObj)
  }
  const onCustomRequest = (config: { file: string | Blob }) => {
    //这个是自定义走的上传接口
    let params = new FormData() //后台需要传这picture流
    console.log(params, 'params')
    params.append('file', config.file)
    axios.post('http://localhost:7002/api/upload', params).then((res) => {
      console.log(res, 'res.data')
      onChange()
    })
  }
  const onChange = () => {
    setLoading(true)
  }
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  )

  return (
    <Upload
      name="avatar"
      listType="picture-card"
      className="avatar-uploader"
      onChange={handleChange}
      customRequest={onCustomRequest}
    >
      {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
    </Upload>
  )
}

export default App