1. 程式人生 > 其它 >Vue+express 實現檔案上傳

Vue+express 實現檔案上傳

檔案上傳

前端 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:'上傳成功'
    })
  }
})