前端部分

html部分

    


        


            


            

        

        


            

                <div class="add">
            

        

    

    


        


            


            

        

        


            

                  <p>商品名稱： <input type="text" class="productName"></p>
            

        

    

    


        


            


            

        

        


            

                  <p>商品價格： <input type="number" class="price" ></p>
            

        

    

    


        


            


            

        

        


            

                  <!-- multiple: 允許同時上傳多張圖片 -->
            

        

    

    


        


            


            

        

        


            

                  <!-- <p>商品圖片： <input type="file" class="file" multiple="multiple"></p> -->
            

        

    

    


        


            


            

        

        


            

                  <p>商品圖片： <input type="file" class="file"></p>
            

        

    

    


        


            


            

        

        


            

                  <p><button class="add-btn">添加商品</button></p>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <script src="js/axios.js"></script>
            

        

    

    


        


            


            

        

        


            

                 <script src="js/util.js"></script>
            

        

    

    


        


            


            

        

        


            

                 <script src="js/upload.js"></script>
            

        

    

upload.js

    


        


            


            

        

        


            

                // 新建表單數據對象，用來存儲上傳的文件及上傳的其它數據
            

        

    

    


        


            


            

        

        


            

                let param = new FormData()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                $(".file").onchange = function(){
            

        

    

    


        


            


            

        

        


            

                 //獲取圖片信息
            

        

    

    


        


            


            

        

        


            

                 let file = this.files[0]
            

        

    

    


        


            


            

        

        


            

                 //"file"為前后端約定vb的屬性名
            

        

    

    


        


            


            

        

        


            

                 param.append("file",file)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                $(".add-btn").onclick = function(){
            

        

    

    


        


            


            

        

        


            

                 let productName = $(".productName").value;
            

        

    

    


        


            


            

        

        


            

                 let price = $(".price").value;
            

        

    

    


        


            


            

        

        


            

                 param.append("productName",productName)
            

        

    

    


        


            


            

        

        


            

                 param.append("price",price)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                 axios.post("/product",param,{
            

        

    

    


        


            


            

        

        


            

                  headers: {
            

        

    

    


        


            


            

        

        


            

                  // 默認提交的類型
            

        

    

    


        


            


            

        

        


            

                  // "content-type": "application/json"
            

        

    

    


        


            


            

        

        


            

                  // 復雜的表單數據(只要上傳文件，就必須是下面的類型)
            

        

    

    


        


            


            

        

        


            

                  "content-type": "multipart/form-data"
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                 })
            

        

    

    


        


            


            

        

        


            

                 .then((res)=>{
            

        

    

    


        


            


            

        

        


            

                  console.log(res.data);
            

        

    

    


        


            


            

        

        


            

                 })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

用postman

Express后端部分

使用multer實現圖片上傳

下載

npm i multer -S

引入

    


        


            


            

        

        


            

                const multer = require("multer")
            

        

    

    


        


            


            

        

        


            

                const path = require("path")
            

        

    

配置

注意： 該文件在/router文件夾中，而uploads存放上傳圖片文件夾在根目錄

    


        


            


            

        

        


            

                var storage = multer.diskStorage({
            

        

    

    


        


            


            

        

        


            

                 // 配置文件上傳后存儲的路徑
            

        

    

    


        


            


            

        

        


            

                 destination: function (req, file, cb) {
            

        

    

    


        


            


            

        

        


            

                  // NodeJS的兩個全局變量
            

        

    

    


        


            


            

        

        


            

                  // console.log(__dirname); //獲取當前文件在服務器上的完整目錄
            

        

    

    


        


            


            

        

        


            

                  // console.log(__filename); //獲取當前文件在服務器上的完整路徑
            

        

    

    


        


            


            

        

        


            

                  cb(null, path.join(__dirname,'../uploads'))
            

        

    

    


        


            


            

        

        


            

                 },
            

        

    

    


        


            


            

        

        


            

                 // 配置文件上傳后存儲的路徑和文件名
            

        

    

    


        


            


            

        

        


            

                 filename: function (req, file, cb) {
            

        

    

    


        


            


            

        

        


            

                  console.log('file',file);
            

        

    

    


        


            


            

        

        


            

                  cb(null, Date.now() + path.extname(file.originalname))
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                var upload = multer({ storage: storage })
            

        

    




    

在路由中使用

    


        


            


            

        

        


            

                //添加商品
            

        

    

    


        


            


            

        

        


            

                router.post("/product",upload.single("file1"),(req,res)=>{
            

        

    

    


        


            


            

        

        


            

                 //接收普通文本參數
            

        

    

    


        


            


            

        

        


            

                 let {productName,price} = req.body;
            

        

    

    


        


            


            

        

        


            

                 、接收上傳文件數據 -->
            

        

    

    


        


            


            

        

        


            

                 let imgUrl = req.file.filename;
            

        

    

    


        


            


            

        

        


            

                 let sql = "insert into product (productName,price,imgUrl) values (?,?,?)"
            

        

    

    


        


            


            

        

        


            

                 conn.query(sql,[productName, price , imgUrl],(err,result)=>{
            

        

    

    


        


            


            

        

        


            

                  if (err){
            

        

    

    


        


            


            

        

        


            

                  console.log('增加失敗');
            

        

    

    


        


            


            

        

        


            

                  return;
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  let data;
            

        

    

    


        


            


            

        

        


            

                  if (result.affectedRows === 1){
            

        

    

    


        


            


            

        

        


            

                  data = {
            

        

    

    


        


            


            

        

        


            

                  code: 0,
            

        

    

    


        


            


            

        

        


            

                  msg: '添加成功'
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  }else{
            

        

    

    


        


            


            

        

        


            

                  data = {
            

        

    

    


        


            


            

        

        


            

                  code: 1,
            

        

    

    


        


            


            

        

        


            

                  msg: '添加失敗'
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  res.send(data)
            

        

    

    


        


            


            

        

        


            

                 })
            

        

    

    


        


            


            

        

        


            

                })
            

        

    




    

如果抽離路由模塊中的處理函數upload.single("file1")寫在Router模塊

實現寫在抽取的模塊 

 NODEJS--express圖片上傳 - 簡書

如果req.body為空，可以用nodejs后臺文件上傳模塊connect-multiparty

使用方法如下：

1.  安裝模塊

npm install connect-multiparty --save

2.  引入模塊

var multipart = require('connect-multiparty');

var multipartMiddleware = multipart();

3.  使用模塊

const express = require('express')

const router = express.Router()

router.post('/formdata',multipartMiddleware, function (req,res) {

console.log(req.query)

//分別返回body，文件屬性，以及文件存放地址

});
————————————————
原文鏈接：https://blog.csdn.net/zjwengyidong/article/details/51407903

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司