使用vue3处理js逻辑，可以使用js源码但是vue更方便。
表单注意事项：
- enctype="multipart/form-data" 必须存在否则php后端接收不到$_FILES数据
- form 表单直接使用form属性action和method会跳转到请求的php文件，使用js可以异步操作页面没有跳转
- 上传多个文件，input name应该包含“[]”，否则后端仅识别最后提交的文件
- 上传多个文件，input 应设置 multiple 属性
- 表单中不设置button的type默认为submit，onclick可能不会被触发，所以要设置为button
js处理原理：
- 获取上传数据
- 上传时判断文件是否可上传，文件数据大于零，文件类型大小等
- post请求处理文档上传
- 输出上传结果
1 表单
<div id="app">
<div>
<h1>UPLOAD</h1>
<div>
<form enctype="multipart/form-data">
Send this file: <input type="file" name="files[]" multiple @change="handleFileUpload" ref="selectedFileInput"/>
<button type="button" @click="submitFile">submit</button>
<button type="button" @click="resetbtn">reset</button>
</form>
</div>
</div>
</div>2 vue3请求
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const { createApp, ref,reactive,onMounted } = Vue
createApp({
setup() {
const selectedFile = ref(null);
const selectedFileInput = ref(null)
const handleFileUpload = (event) => {
console.log(event);
selectedFile.value = event.target.files; // 获取第一个选择的文件
};
const submitFile = () => {
console.log(selectedFile.value)
if (!selectedFile.value) {
alert("请选择一个文件！");
return;
}
_submitFile();
}
function _submitFile(){
// 这里可以添加将文件发送到服务器的代码，例如使用FormData和XMLHttpRequest，或者使用axios等库。
const formData = new FormData();
let files = selectedFile.value
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
// formData.append('files', selectedFile.value);
_doRequest(formData)
}
function _doRequest(formData){
const url ="upload.php";
// 示例使用axios发送文件
axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data',
// 'Sec-Fetch-Dest':'document'
}
})
.then(response => {
console.log('文件上传成功', response);
selectedFile.value = null
})
.catch(error => {
console.error('文件上传失败', error);
});
};
function _doRequest2(formData){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
console.log(this.response); // 处理响应
} else {
console.error('Upload failed.');
}
};
xhr.send(formData);
}
const resetbtn = ()=>{
console.log(selectedFileInput.value)
if(selectedFileInput.value){
const inputElement = document.querySelector('input[name="files[]"]');
if (inputElement) {
inputElement.value = null; // 重置文件输入
selectedFile.value = null
}
}
}
onMounted(()=>{
console.log(selectedFileInput.value)
console.log(selectedFile.value)
})
return {
submitFile,
handleFileUpload,
selectedFile,
selectedFileInput,
resetbtn
}
}
}).mount('#app')
</script>3 PHP处理
通用方法 common.php
function uploadfile($file, $toPath = null, $usename = false) {
$uploadDefaultPath = PATH_UPLOAD;
if (empty($toPath)) {
$toPath = $uploadDefaultPath;
} else {
$toPath = $uploadDefaultPath . "/" . $toPath;
if (!is_dir($toPath)) {
mkdir($toPath);
}
}
$fromfilepath = $file['tmp_name']; //D:\document\files_upload_tmp_dir\php7C1.tm 临时文件
$oldfilename = $file['name'];
if (!is_uploaded_file($fromfilepath)) {
return false;
}
$fielpathinfo = pathinfo($oldfilename);
$extension = $fielpathinfo['extension'];
$oldfilename = $fielpathinfo['filename'];
$fielename = date('YmdHis', time()) . mt_rand();
if ($usename) {
$fielename = $oldfilename;
}
$fielename .= "." . $extension;
$toPath = $toPath . "/" . $fielename;
$result = move_uploaded_file($fromfilepath, $toPath);
return $result;
}
function backjson($code, $msg, $data = []) {
$data = [
'code' => $code,
'msg' => $msg,
'data' => $data,
];
$str = json_encode($data, 304);
exit($str);
}业务处理 upload.php
include_once "common.php";
define("PATH_UPLOAD", "./upload");
if ('POST' == $_SERVER['REQUEST_METHOD']) {
if (isset($_FILES['files']) && count($_FILES['files']) > 0) {
$files = $_FILES['files'];
$fiels_arr = [];
if (count($files['name']) >= 1) {
foreach ($files['name'] as $key => $value) {
$file_time = [
'name' => $files['name'][$key],
'type' => $files['type'][$key],
'tmp_name' => $files['tmp_name'][$key],
'error' => $files['error'][$key],
'size' => $files['size'][$key],
];
$fiels_arr[] = $file_time;
}
} else {
$fiels_arr[] = $files;
}
$success_count = 0;
$error_list = [];
foreach ($fiels_arr as $key => $value) {
try {
$result = uploadfile($value, "test", true);
if ($result) {
$success_count++;
} else {
throw new \Exception($valu['name'] . "上传失败");
}
} catch (\Exception $th) {
$msg = $th->getMessage();
$code = $th->getCode();
$error_list[] = $msg;
}
}
if (count($error_list) > 0) {
$errormsg = implode(" ", $error_list);
backjson(0, $errormsg);
}
backjson(1, "上传成功");
}
}
参考
多文件上传
PHP: Uploading multiple files - Manual 
https://www.php.net/file-upload.multiple