Vue+express 實現檔案上傳
阿新 • • 發佈:2022-03-25
檔案上傳
前端 FormData 上傳檔案
只有 FormData 資料格式,可以直接上傳檔案
let formData = new FormData() // 例項化一個FormData物件 formData.append('file', file) // 將檔案加入FormData物件中 formData.append('username', username) // 將普通資料加入FormData物件中 axios.post('/upload', formData) // axios發起post請求,攜帶FormData引數 .then((response) => { console.log(response) }) .catch((error) => { console.log(error) })
後端接收 FormData 資料
安裝 multiparty 模組
npm i multiparty
獲取FormData資料,響應客戶端
app.post('/upload', (req, res) => { let form = new multiparty.Form(); // multiparty例項化form form.uploadDir = './upload'; // 配置檔案儲存路徑 form.parse(req,function(err, fields, files) { // 解析FormData console.log(files.file[0]) // files 中儲存的是檔案 console.log(fields.username[0]) // fields 儲存的是普通資料 // ......操作資料 res.json({ // 響應客戶端 code:200, msg:'上傳成功' }) } })