鍍金池/ 問答/Java  C  HTML/ 前后端實(shí)現(xiàn)多圖片上傳

前后端實(shí)現(xiàn)多圖片上傳

我想把圖片放在一個(gè)文件夾里，然后把這些圖片的地址存到數(shù)據(jù)庫里，當(dāng)頁面要加載這些圖片時(shí)就根據(jù)數(shù)據(jù)庫里的地址取出這些圖片。請問要怎么實(shí)現(xiàn)把圖片放到文件夾里，我后端用的是node.js

回答
編輯回答
胭脂淚

express.js

var express = require('express');
var fs=require('fs'); //文件操作
var app=express(); //創(chuàng)建web應(yīng)用程序
var multer=require('multer'); //這是一個(gè)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);
            // 把圖片存數(shù)據(jù)庫里
        }
        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>
2017年5月15日 20:02
編輯回答
幼梔

multer中間件主要用來處理multipart/form-data類型
如果你想要表單和圖片一起提交可以選擇formidable中間件
存數(shù)據(jù)庫就是處理成功后存入就可以啦

2018年9月13日 02:06
編輯回答
我甘愿

前端用form-data node用multiparty中間件讀formdata 了解一下

2018年5月28日 12:58
編輯回答
祈歡

存數(shù)據(jù)庫 你直接存儲路徑就行了嘛
如果你覺得循環(huán)讀取數(shù)據(jù)庫太累贅了
你就用json存儲多條路徑唄

2018年5月15日 09:40
編輯回答
刮刮樂

有考慮過用第三方嗎？比如說七牛云之類的，這些廠商往往有現(xiàn)成的demo，多文件分片上傳也是分分鐘，沒必要重復(fù)造輪子了

2017年12月20日 12:32