前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<input type="file" id="file"/>
<button @click="upload">上传</button>
<a v-if="download" :href="fileName" download target="_blank">
<button @click="downLoad">下载查看</button>
</a>
</div>
<script>
new Vue({
el: '#app',
data: {
fileName: '',
download: false
},
methods: {
// 文件上传
upload() {
let fileData = document.getElementById('file').files[0]
let userNo = '123'
var formData = new FormData()
formData.append('fileData', fileData)
formData.append('userNo', '123')
let _this = this
$.ajax({
type: 'POST',
data: formData,
url: 'http://localhost:11111/phpStudy/uploadFile.php', // 请求的uploadFile.php的地址
dataType: 'json', // 传递数据的格式
async: false, // 这是重要的一步,防止重复提交的
cache: false, // 设置为false,上传文件不需要缓存。
contentType: false, // 设置为false,因为是构造的FormData对象,所以这里设置为false。
processData: false, // 设置为false,因为data值是FormData对象,不需要对数据做处理。
success: function(data) {
console.log(data)
alert(data.msg)
_this.fileName = 'http://localhost:11111/phpStudy/' + userNo + '/' + data.fileName
_this.download = true
},
error: function(data) {
console.log('错误')
}
})
},
// 文件下载
downLoad() {
console.log(this.fileName)
}
}
})
</script>
</body>
</html>
后台PHP代码:upload.php
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2019-1-21 0021
* Time: 15:17
*/
header("Content-Type: text/html; charset=UTF-8");
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');
// 获取上传文件data
$fileData = $_FILES['fileData'];
// 文件名
$fileName = $fileData['name'];
// 用户编号
$userNo = $_POST['userNo'];
// 服务器临时文件
$tmp_name = $fileData['tmp_name'];
// 转码为GB2312(防止文件夹名称为中文时乱码)
$fileName = iconv('UTF-8', 'GB2312', $fileName);
// 接收到的文件要保存的文件夹名称
$dirName = $userNo;
// 检查服务器当前地址有无名称为用户编号的
if (!file_exists($dirName)) {
// 如果该文件夹不存在,新建该文件夹
$cc = mkdir($dirName, 0777);
if ($cc === true) {
$msg = '创建'.$dirName.'文件夹成功!';
} else {
$msg = '创建'.$dirName.'文件夹失败!';
echo json_encode($msg);
return;
}
} else {
// 如果该文件夹已存在
$msg = '文件夹'.$dirName.'在当前文件夹里已存在!';
}
// 目标地址
$desUrl = $dirName."/".$fileName;
// 将服务器上的临时文件移动至指定的目录 (move_uploaded_file函数)
$status = move_uploaded_file($tmp_name, $desUrl);
if ($status === true) {
// 转码为UTF-8
$fileName = iconv('GB2312', 'UTF-8', $fileName);
// 输出语句
echo json_encode(array('status' => 'success', 'msg' => '上传成功!', 'fileName' => $fileName));
} else {
// 输出语句
echo json_encode(array('status' => 'error', 'msg' => '上传失败!', 'fileName' => ''));
}
上传成功后,会在upload.php统计目录下创建名为123的文件夹,文件夹里即为上传的文件。