第二版：实现上传功能

# 第二版：实现上传功能

# 1. 概述

本版本实现图片、音视频等文件的上传功能，允许用户通过编辑器直接上传多媒体内容，增强编辑体验。

# 2. 目标

实现文件上传功能。
确保上传过程中的用户体验流畅。

# 3. 技术栈

HTTP 库：Axios
后端服务：Node.js 或中台服务

# 4. 实现步骤

# 4.1 前端上传功能

在组件中添加上传按钮，使用 axios 发送文件上传请求。

处理文件选择和上传逻辑。

const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await axios.post(uploadUrl, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
            onUploadProgress: (progressEvent) => {
                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                // 显示上传进度
            },
        });
        // 处理上传成功后的操作
        editorRef.current.insertHtml(`<img src="${response.data.url}" />`); // 示例插入图片
    } catch (error) {
        // 处理上传错误
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 4.2 文件类型与大小限制

在上传前进行文件类型和大小的校验。

提供用户友好的错误提示，防止不合规文件上传。

if (file.size > MAX_FILE_SIZE) {
    alert('文件大小超出限制');
    return;
}

1
2
3
4

# 4.3 后端接口设计

确定后端上传接口，支持图片、音视频文件格式。

若选择自行实现上传功能，使用 Multer 库处理文件上传，配置存储路径。

const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    },
});
const upload = multer({ storage });

1
2
3
4
5
6
7
8
9
10

# 5. 安全性

确保上传接口进行身份验证，防止未授权用户上传文件。
后端应对上传的文件进行类型和大小的安全校验。