第一步是安裝好multer庫并且引入
第二部app.js中設定傳上來檔案的存儲路徑以及檔案名
建立存儲檔案夾有就不會建立。
var createFolder = function(folder){
try{
fs.accessSync(folder);
}catch(e){
fs.mkdirSync(folder);
}
};
var uploadFolder = ‘./assets/upload/’;
createFolder(uploadFolder);
配置檔案存儲路徑
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, uploadFolder) // 儲存的路徑，備注：需要自己建立
},
filename: function(req, file, cb) {
const fileFormat = (file.originalname).split(’.’) // 取字尾
cb(null, file.originalname)
} })
var upload = multer({ storage: storage })
接口
// muilter.single(‘file’), //适用于單檔案上傳
// muilter.array(‘file’,num), //适用于多檔案上傳，num為最多上傳個數，上傳檔案的數量可以小于num,
// muilter.fields(fields), //适用于混合上傳，比如A類檔案1個，B類檔案2個。官方API有詳細說明。
app.post("/upload",upload.single(‘file’), function(req, res) {
// req.file 是 前端表單name==“imageFile” 的檔案資訊（不是數組）
res.send(req.file);
console.log(req.file.path)
})
第三部前端編寫
const formData = new FormData()
const file = this. r e f s . u p l o a d . u p l o a d F i l e s [ 0 ] c o n s t h e a d e r C o n f i g = h e a d e r s : ′ C o n t e n t − T y p e ′ : ′ m u l t i p a r t / f o r m − d a t a ′ i f ( ! f i l e ) / / 若 未 選 擇 文 件 a l e r t ( ′ 請 選 擇 文 件 ′ ) r e t u r n f o r m D a t a . a p p e n d ( ′ f i l e ′ , f i l e . r a w ) t h i s . refs.upload.uploadFiles[0] const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' }} if (!file) { // 若未選擇檔案 alert('請選擇檔案') return } formData.append('file', file.raw) this. refs.upload.uploadFiles[0]constheaderConfig=headers:′Content−Type′:′multipart/form−data′if(!file)//若未選擇檔案alert(′請選擇檔案′)returnformData.append(′file′,file.raw)this.axios.post(’/upload’, formData, headerConfig).then(res => {
this.url=’./’+res.data
這裡用的前端表格是vue element-ui寫的送出資料用的是jquery中axios，用的時候記得先配置