React+Node项目中如何将上传文件链接存入MySQL？

一、配置Express静态文件服务 #

先让Node服务器对外开放文件存储目录的访问权限，这样上传的文件才能通过HTTP链接被访问到。在后端index.js中添加静态文件服务配置：

const express = require('express');
const app = express();
// 将本地Images文件夹映射为可通过/images路径访问的静态资源
app.use('/images', express.static('Images'));

配置后，上传的文件就能通过 http://localhost:3001/images/[文件名] 这样的URL直接访问或下载。

二、生成可访问链接并存入数据库 #

修改后端上传接口，提取文件信息生成完整访问链接，再将链接存入MySQL。注意修正原代码中的数组索引错误（表单仅一个文件输入，应取req.files[0]而非req.files[2]），同时避免直接存储文件对象：

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'Images')
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname))
    }
})

const upload = multer({storage: storage});

app.post("/upload", upload.array('DocumentFile', 10), (req, res) => {
    const Currency = req.body.Currency
    const InvoiceNo = req.body.InvoiceNo
    const Invoice_Date = req.body.Invoice_Date
    const Amount = req.body.Amount
    const Description = req.body.Description
    
    // 生成文件访问链接
    let attachmentUrl = null;
    if (req.files.length > 0) {
        const file = req.files[0];
        // 拼接完整URL，线上环境需替换为服务器域名/公网IP
        attachmentUrl = `http://localhost:3001/images/${file.filename}`;
    }

    // 插入数据库时传入生成的链接
    const q = "INSERT INTO payg(InvoiceNo, InvoiceDate, Title, Currency, Amount, Attachments) VALUES (?, ?, ?, ?, ?, ?)"
    db.query(q, [InvoiceNo, Invoice_Date, Description, Currency, Amount, attachmentUrl], (err, result) => {
        if (err) {
            console.error(err);
            return res.status(500).send("上传失败");
        }
        console.log("文件链接已存入数据库:", attachmentUrl);
        res.send("上传成功");
    })
})

三、数据库字段调整 #

确保payg表的Attachments字段类型为VARCHAR(500)（或更长的字符串类型），用来存储URL格式的字符串链接，避免因字段类型不匹配导致存储失败。

四、前端展示下载链接（可选） #

如果需要在前端提供下载入口，从数据库查询到数据后，直接将Attachments字段的URL作为<a>标签的href属性即可：

// 示例：遍历数据列表展示下载链接
{dataList.map(item => (
    <div key={item.InvoiceNo}>
        <p>发票编号：{item.InvoiceNo}</p>
        {item.Attachments && (
            <a href={item.Attachments} target="_blank" download>下载附件</a>
        )}
    </div>
))}

注意事项 #

• 线上部署时，需将URL中的localhost:3001替换为服务器的公网域名或IP地址
• 确保服务器的Images文件夹具备读写权限，防止文件上传失败
• 可在multer配置中添加fileFilter和limits选项，限制上传文件的类型和大小

内容的提问来源于stack exchange，提问作者RDK