快捷導(dǎo)航

Express+React+Antd實現(xiàn)上傳功能(前端和后端)

更新時間：2024年04月27日 15:00:22 作者：小伙伴123456

這篇文章主要介紹了Express+React+Antd實現(xiàn)上傳功能(前端和后端),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

前端部分：

1、新建React項目

終端輸入：

npx create-react-app myapp

執(zhí)行后初始化Reac項目就完成了。

2、安裝Antd

npm install antd --save

看到antd及版本號說明安裝成功。

3、使用Upload組件

import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Image, Upload } from 'antd';
const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
const MyUpload = () => {
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [fileList, setFileList] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-2',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-3',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
  };
  const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
        上傳圖片
      </div>
    </button>
  );
  return (
    <>
      <Upload
        action=""
        listType="picture-card"
        fileList={fileList}
        onPreview={handlePreview}
        onChange={handleChange}
      >
        {fileList.length >= 8 ? null : uploadButton}
      </Upload>
      {previewImage && (
        <Image
          wrapperStyle={{
            display: 'none',
          }}
          preview={{
            visible: previewOpen,
            onVisibleChange: (visible) => setPreviewOpen(visible),
            afterOpenChange: (visible) => !visible && setPreviewImage(''),
          }}
          src={previewImage}
        />
      )}
    </>
  );
};
export default MyUpload;

前端部分完成。

后端部分

1、初始化

創(chuàng)建文件夾，打開終端輸入：

npm init

可以看到自動生成了package.json

接下來安裝express

npm install express --save

2、安裝express-generator

npx express-generator  或者 npm install express-generator

express-generator可以為我們自動生成項目骨架。

骨架搭建完畢后再執(zhí)行npm install 安裝依賴，接著執(zhí)行npm start,項目成功運行！

訪問localhost:3000,3000為默認(rèn)端口，看到如下頁面說明express項目搭建完成。

3、圖片上傳接口

在express中可以使用multer實現(xiàn)圖片上傳。

安裝multer

npm install multer

import express from 'express'
import multer from 'multer'
const app = express()
// 設(shè)置存儲配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + file.originalname)
  }
})
const upload = multer({ storage: storage });
// 解析post請求body參數(shù)
app.use(express.urlencoded({extended: false }))
app.use(express.json())
// 托管靜態(tài)文件
app.use('/uploads', express.static('uploads'))
// 設(shè)置跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});
// 處理上傳的圖片
app.post('/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  console.log(file);
  if (!file) {
    return res.status(400).send('No file uploaded.');
  }
  res.json('File uploaded successfully.');
});
import routerLogin from './router/login.js'
import routerList from './router/list.js';
app.use('/api', routerLogin)
app.use('/api', routerList)
const port = 4000
app.listen(port, () => {
  console.log(`端口運行于http://127.0.0.1:${port}`);
})

到此這篇關(guān)于Express+React+Antd實現(xiàn)上傳功能的文章就介紹到這了,更多相關(guān)Express React Antd上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: