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)求后，可以通過相應(yīng)的框架或庫來解析?multipart/form-data，獲取到文件數(shù)據(jù)，并進(jìn)行進(jìn)一步處理，例如保存文件到服務(wù)器或者進(jìn)行文件內(nèi)容分析等操作。

文件上傳表單示例：

上傳文件

action="/upload"?指定了表單提交的目標(biāo)后端URL。method="POST"?指定了使用POST方法提交表單。enctype="multipart/form-data"?表示表單中包含文件上傳，這是必需的，因?yàn)槲募蟼餍枰褂?multipart/form-data?類型來傳輸文件數(shù)據(jù)。?是文件上傳的輸入框，其中：

type="file"?表示這是一個(gè)文件輸入框，允許用戶選擇文件。name="file"?指定了后端接收文件時(shí)的字段名稱，這個(gè)名稱在后端處理文件時(shí)很重要。id="fileInput"?可以用來通過 JavaScript 獲取文件輸入框的引用，以便在用戶選擇文件后執(zhí)行一些操作（例如顯示文件名或大?。?。上傳文件?是一個(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?中間件來處理單個(gè)文件上傳，upload.single('file')?表示期望接收一個(gè)名為?file?的文件字段。 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ù)組來接收上傳的文件，并使用?move_uploaded_file()?函數(shù)將文件從臨時(shí)位置移動(dòng)到指定的目標(biāo)位置。

用JS將文件傳入后端

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

html

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ù)來實(shí)例化一個(gè)表單類型。

axios傳遞

axios({

url: '',

method: 'POST',

data: fd

}).then(res => {

console.log(res);

})

通過ajax就可以將文件傳入后端。

柚子快報(bào)邀請(qǐng)碼778899分享：前端如何將pdf等文件傳入后端

http://yzkb.51969.com/

推薦鏈接