2023-2-8 前端達人
-
<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>
-
// 新建表單數(shù)據(jù)對象，用來存儲上傳的文件及上傳的其它數(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: {
-
// 默認提交的類型
-
// "content-type": "application/json"
-
// 復雜的表單數(shù)據(jù)(只要上傳文件，就必須是下面的類型)
-
"content-type": "multipart/form-data"
-
}
-
})
-
.then((res)=>{
-
console.log(res.data);
-
})
-
}
下載
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)=>{
-
//接收普通文本參數(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)
-
})
-
})
如果抽離路由模塊中的處理函數(shù)upload.single("file1")寫在Router模塊
實現(xiàn)寫在抽取的模塊
如果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
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.yvirxh.cn