nodejs--圖片上傳

2023-2-8 前端達(dá)人

前端部分

html部分




    

        

            

            

        

        

            
                <div class="add">
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                  <!-- <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




    

        

            

            

        

        

            
                // 新建表單數(shù)據(jù)對(duì)象，用來存儲(chǔ)上傳的文件及上傳的其它數(shù)據(jù)
            

        

    

    

        

            

            

        

        

            
                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: {
            

        

    

    

        

            

            

        

        

            
                  // 默認(rèn)提交的類型
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                  }
            

        

    

    

        

            

            

        

        

            
                 })
            

        

    

    

        

            

            

        

        

            
                 .then((res)=>{
            

        

    

    

        

            

            

        

        

            
                  console.log(res.data);
            

        

    

    

        

            

            

        

        

            
                 })
            

        

    

    

        

            

            

        

        

            
                }

用postman

Express后端部分

使用multer實(shí)現(xiàn)圖片上傳

下載

npm i multer -S

引入




    

        

            

            

        

        

            
                const multer = require("multer")
            

        

    

    

        

            

            

        

        

            
                const path = require("path")

配置

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




    

        

            

            

        

        

            
                var storage = multer.diskStorage({
            

        

    

    

        

            

            

        

        

            
                 // 配置文件上傳后存儲(chǔ)的路徑
            

        

    

    

        

            

            

        

        

            
                 destination: function (req, file, cb) {
            

        

    

    

        

            

            

        

        

            
                  // NodeJS的兩個(gè)全局變量
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                 },
            

        

    

    

        

            

            

        

        

            
                 // 配置文件上傳后存儲(chǔ)的路徑和文件名
            

        

    

    

        

            

            

        

        

            
                 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)=>{
            

        

    

    

        

            

            

        

        

            
                 //接收普通文本參數(shù)
            

        

    

    

        

            

            

        

        

            
                 let {productName,price} = req.body;
            

        

    

    

        

            

            

        

        

            
                 、接收上傳文件數(shù)據(jù) -->
            

        

    

    

        

            

            

        

        

            
                 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)
            

        

    

    

        

            

            

        

        

            
                 })
            

        

    

    

        

            

            

        

        

            
                })