当前位置：文江博客话题详情

Node.js 图片上传 Vue.js 后端图片存储

前后端实现多图片上传

发布于 2022-09-06 22:07:19 字数 96 浏览 17 评论 0

我想把图片放在一个文件夹里，然后把这些图片的地址存到数据库里，当页面要加载这些图片时就根据数据库里的地址取出这些图片。请问要怎么实现把图片放到文件夹里，我后端用的是node.js

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（5）

又爬满兰若 2022-09-13 22:07:19

express.js

var express = require('express');
var fs=require('fs'); //文件操作
var app=express(); //创建web应用程序
var multer=require('multer'); //这是一个Node.js的中间件处理multipart/form-data
var upload=multer({dest:'./tmp'});


app.get('/index.html',function (req,res) {
    res.sendfile(__dirname+'/index.html');
});


app.post('/addUserInfo', upload.array("file"), function(req, res, next){
    if(req.files==undefined){
        res.send("请选择要上传的图片...");
    }else{
        var str="文件上传成功...";
        for(var i=0;i<req.files.length;i++){
            var filepath = __dirname + "/tmp/" + req.files[i].originalname;
            fs.renameSync(req.files[i].path,filepath);
            // 把图片存数据库里
        }
        res.send("上传的图片成功...");
    }
});
app.listen(8080,"127.0.0.1");

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>上传图片</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="addUserInfo">
请选择图片：<input type="file" id="file" name="file" multiple/><br/>
<input type="submit" value="上传"/>
</form>
</body>
</html>

萌面超妹 2022-09-13 22:07:19

multer中间件主要用来处理multipart/form-data类型
如果你想要表单和图片一起提交可以选择formidable中间件
存数据库就是处理成功后存入就可以啦

多孤肩上扛 2022-09-13 22:07:19

前端用form-data node用multiparty中间件读formdata 了解一下

说好的呢 2022-09-13 22:07:19

存数据库你直接存储路径就行了嘛
如果你觉得循环读取数据库太累赘了
你就用json存储多条路径呗

谁的年少不轻狂 2022-09-13 22:07:19

有考虑过用第三方吗？比如说七牛云之类的，这些厂商往往有现成的demo，多文件分片上传也是分分钟，没必要重复造轮子了

~没有更多了~

关于作者

醉梦枕江山

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文