我們知道在js中我們可以通過(guò)：

<input type="file" name="file" id="fileInput" accept="image/*">

來(lái)輸入文件。其中type指后端url，accept來(lái)限制傳入類型。

前端通過(guò)表單形式將其傳入后端

那么前端是怎么將這一整個(gè)文件打包傳入后端的呢？

原來(lái)前端通過(guò)文件上傳表單的方式將文件傳輸?shù)胶蠖?。這通常涉及使用 HTML 的 <form> 元素和 <input type="file"> 輸入框，以及設(shè)置適當(dāng)?shù)谋韱螌傩詠?lái)支持文件上傳。

Payload截圖

可以看到我在使用ant design vue框架時(shí)其文件傳輸?shù)膬?nèi)容包含狀態(tài)，上傳時(shí)間，文件名字等。

文件上傳的流程：

• 用戶在文件輸入框中選擇一個(gè)文件。
• 用戶點(diǎn)擊提交按鈕，瀏覽器將會(huì)把表單數(shù)據(jù)（包括選定的文件）打包成 multipart/form-data 格式的請(qǐng)求體。
• 請(qǐng)求被發(fā)送到指定的后端URL（在這個(gè)例子中是 /upload）。
• 后端接收到請(qǐng)求后，可以通過(guò)相應(yīng)的框架或庫(kù)來(lái)解析 multipart/form-data，獲取到文件數(shù)據(jù)，并進(jìn)行進(jìn)一步處理，例如保存文件到服務(wù)器或者進(jìn)行文件內(nèi)容分析等操作。

文件上傳表單示例：

<form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="submit">上傳文件</button>
</form>

解釋：

• <form> 元素定義了一個(gè)表單，其中：
  • action="/upload" 指定了表單提交的目標(biāo)后端URL。
  • method="POST" 指定了使用POST方法提交表單。
  • enctype="multipart/form-data" 表示表單中包含文件上傳，這是必需的，因?yàn)槲募蟼餍枰褂?nbsp;multipart/form-data 類型來(lái)傳輸文件數(shù)據(jù)。
• <input type="file" name="file" id="fileInput"> 是文件上傳的輸入框，其中：
  • type="file" 表示這是一個(gè)文件輸入框，允許用戶選擇文件。
  • name="file" 指定了后端接收文件時(shí)的字段名稱，這個(gè)名稱在后端處理文件時(shí)很重要。
  • id="fileInput" 可以用來(lái)通過(guò) JavaScript 獲取文件輸入框的引用，以便在用戶選擇文件后執(zhí)行一些操作（例如顯示文件名或大小）。
• <button type="submit">上傳文件</button> 是一個(gè)提交按鈕，點(diǎn)擊它會(huì)觸發(fā)表單提交操作。

后端處理文件上傳的例子：

• Node.js（使用 Express 框架）：

  const express = require('express');
  const multer = require('multer');
  const upload = multer({ dest: 'uploads/' });
  
  const app = express();
  
  app.post('/upload', upload.single('file'), (req, res) => {
      const file = req.file;
      // 處理文件，例如保存到服務(wù)器或者返回其他響應(yīng)
      res.send('文件上傳成功');
  });
  
  app.listen(3000, () => {
      console.log('服務(wù)器運(yùn)行在 http://localhost:3000');
  });

  在這個(gè)例子中，使用了 multer 中間件來(lái)處理單個(gè)文件上傳，upload.single('file') 表示期望接收一個(gè)名為 file 的文件字段。

• PHP：

  <?php
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["file"]["name"]);
  $uploadOk = 1;
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
      echo "文件上傳成功";
  } else {
      echo "文件上傳失敗";
  }
  ?>

  PHP 示例使用了 $_FILES 超全局?jǐn)?shù)組來(lái)接收上傳的文件，并使用 move_uploaded_file() 函數(shù)將文件從臨時(shí)位置移動(dòng)到指定的目標(biāo)位置。

用JS將文件傳入后端

上面以及展示了html文件上傳表單的示例，下面再展示通過(guò)JavaScript監(jiān)聽文件選擇事件來(lái)傳遞。

html

<div>
    <input type="file" id="File">
    <button>點(diǎn)擊上傳文件</button>
</div>

JS綁定事件

document.querySelector('button').addEventListener('click', e => {
	let fileList = document.querySelector('#File').files
})
let fd = new FormData()
fd.append('aaa',fileList[0])

如果接口文檔要求傳遞請(qǐng)求體(包括Content-Disposition, Content-Type等)我們使用window提供的FormData構(gòu)造函數(shù)來(lái)實(shí)例化一個(gè)表單類型。

axios傳遞

axios({
	url: '',
	method: 'POST',
	data: fd
}).then(res => {
	console.log(res);
})

通過(guò)ajax就可以將文件傳入后端。

總結(jié)

到此這篇關(guān)于前端通過(guò)表單將pdf等文件傳入后端的文章就介紹到這了,更多相關(guān)前端將pdf等文件傳入后端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論