Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端)
更新時間：2024年04月27日 15:00:22 作者：小伙伴123456
這篇文章主要介紹了Express+React+Antd實(shí)現(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,項目成功運(yùn)行！
訪問localhost:3000,3000為默認(rèn)端口，看到如下頁面說明express項目搭建完成。
3、圖片上傳接口
在express中可以使用multer實(shí)現(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(`端口運(yùn)行于http://127.0.0.1:${port}`);
})到此這篇關(guān)于Express+React+Antd實(shí)現(xiàn)上傳功能的文章就介紹到這了,更多相關(guān)Express React Antd上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React router cache route實(shí)現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性，在5.x版本之前，我們可以基于react-router-cache-route來實(shí)現(xiàn)路由緩存功能。但是react-router 6.x在實(shí)現(xiàn)上做了比較大的變化，react-router-cache-route沒有提供相應(yīng)的支持2023-01-01
pubsub-js?是一個用于實(shí)現(xiàn)發(fā)布-訂閱模式的 JavaScript 庫,可以用于不同組件之間的通信,在 React 中,可以使用?pubsub-js?來實(shí)現(xiàn)組件之間的通信,本篇文章給大家講解pubsub-js在react中的使用,感興趣的朋友一起看看吧2023-10-10
我們知道，在React中沒有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來對數(shù)據(jù)進(jìn)行更改的。而通過this.setState方法更改的數(shù)據(jù)，會讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
通過React-Native實(shí)現(xiàn)自定義橫向滑動進(jìn)度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序?yàn)榭v向由上至下依次排列,對React Native橫向滑動進(jìn)度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了react的滑動圖片驗(yàn)證碼組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了React如何通過@craco/craco代理接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Jira 任務(wù)管理系統(tǒng)項目總結(jié)講解
這篇文章主要為大家介紹了Jira 任務(wù)管理系統(tǒng)項目總結(jié)講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
關(guān)于React中setState同步或異步問題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細(xì)的介紹一下React中setState同步或異步問題，感興趣的可以了解一下2021-11-11
react?hooks頁面實(shí)時刷新方式(setInterval)
這篇文章主要介紹了react?hooks頁面實(shí)時刷新方式(setInterval),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03