express檔案上傳

使用multer

1、 在項目中下載下傳multer操作子產品

Npm install multer --save

前端代碼：

<form class="layui-form" action="/add" method="POST" enctype="multipart/form-data">
           

注意隻要是上傳檔案請設定form enctype屬性為：multipart/form-data

設定完即可

伺服器代碼

1、 引入multer子產品

Var multer = require(“multer”);

2、 引入fs子產品用于更改上傳檔案的名稱

Var fs= require(“fs”);

3、 設定上傳檔案儲存路徑

//配置上傳檔案的儲存路徑 放到public下upload目錄中友善前端代碼通路 upload檔案如果不存在會自動建立

var upload = multer({ dest: 'public/upload/' });
           

單檔案上傳：

使用single(filename)

Router.post(“/router”,upload.single(filename),function(req,res,next){ 
    Res.send(“上傳成功”)
})
           

多檔案上傳：

前端修改：

<input type="file" id="L_repass" multiple name="img"  autocomplete="off" class="layui-input">
           

添加屬性 multiple為選擇多個檔案

後端代碼使用循環上傳檔案

把upload.single改為upload.array(“imgs”,5)

Imgs：file name屬性值

5：為上傳檔案個數限制最大5

注意：這個時候上傳的檔案沒有字尾名需要自己編寫代碼處理

處理字尾名：使用fs子產品中的

//得到檔案資訊

var file = req.file;

console.log(file);

//修改檔案名稱

fs.renameSync(file.path,“public/upload/”+file.originalname);

res.send(“上傳成功”);

處理檔案随機名稱可以使用時間戳與随機數進行處理

router.post('/add',upload.single('img'), (req, res) => {
     //得到檔案資訊
     var file = req.file;
     console.log(file);
     var filename = "public/upload/";
     if(file.mimetype == "image/jpeg"){
        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
     }else if(file.mimetype == "image/png"){
        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
     }else{
      res.send("上傳檔案格式不支援請上傳png與jpg圖檔");
     }
     fs.renameSync(file.path,filename);
     res.send("上傳成功");
});
           

最後把圖檔路徑資訊與其他資訊儲存到資料庫中

//files為送出過來的表單中file元件的name屬性值

router.post('/add',upload.single('img'), (req, res) => {
     //得到檔案資訊
     var file = req.file;
     var filename = "upload/";
     if(file.mimetype == "image/jpeg"){
        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
     }else if(file.mimetype == "image/png"){
        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
     }else{
      res.send("上傳檔案格式不支援請上傳png與jpg圖檔");
     }
     fs.renameSync(file.path,"public/"+filename);

     var sql = `INSERT INTO stuinfo (stuname, stuicon, stusex, stuage, stutel,stuaddress) VALUES ('${req.body.username}', '${filename}', '${req.body.sex}', '${req.body.age}', '${req.body.tel}', '${req.body.address}')`;

     mdb(sql,function(err,result){
         res.send("添加資訊成功")
     })


});
           

Ajax 上傳圖檔

1、 手動初始化formData對象

2、 把你要上傳的資料append進fromData對象中

3、 //得到值

var username = $("#username").val();

var sex = $(“input📻checked”).val();

var age = $("#age").val();

var tel = $("#tel").val();

var address = $("#address").val();

//把要上傳的資料append進formdata對象中
                formdata.append("username",username);
                formdata.append("sex",sex);
                formdata.append("age",age);
                formdata.append("tel",tel);
                formdata.append("address",address);
                formdata.append("img",$("#img")[0].files[0])
           

append(“key”,value)

key:類似于 表單中文本域中name的屬性值

value:資料

$("#img")[0].files[0]類似于document.getElementById(“img”).files[0]
           

在ajax中添加兩個屬性

contentType: false,内容類型設定為false

processData: false,資料編碼設定為false類似于enctype=“multipart/form-data”

//執行個體化FormData
                    var formdata = new FormData();
                    
                    //得到值
                    var username = $("#username").val();
                    var sex = $("input:radio:checked").val();
                    var age = $("#age").val();
                    var tel = $("#tel").val();
                    var address = $("#address").val();

                    //把要上傳的資料append進formdata對象中
                    formdata.append("username",username);
                    formdata.append("sex",sex);
                    formdata.append("age",age);
                    formdata.append("tel",tel);
                    formdata.append("address",address);
                    formdata.append("img",$("#img")[0].files[0])
                    $.ajax({
                        type: "post",
                        url: "/add",
                        data: formdata,
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        success: function (response) {
                            closeParent("增加成功");
                        }
                    });