vue上传文件php,php文件上传 – 前端开发，JQUERY特效，全栈开发，vue开发
文件上傳一般有下面2種方式：
有兩種：
1、標準input表單方式，典型的用$_FILES進行接收；
2、以Base64的方式進行傳送，一般是AJAX異步上傳。
第一種
標準的input表單方式，適用于大文件進行上傳，同時支持批量。html代碼關鍵的幾句：
不同的name時：
其中enctype="multipart/form-data"對于文件上傳是必不可少的。另外type="file"設置input類型，accept="image/*"指定優先上傳圖片(MIME 參考手冊)。multiple支持一次選多個文件，pic[]以數組的形式接收多個文件。手機端端還可以加入參數capture="camera"選擇攝像頭拍照上傳。
后端處理：
通過$_FILES獲取上傳的文件。
$files = $_FILES;
傳多個文件時，如果name不同，則返回的$_FILES數組格式不同。
name相同時：
array(1) {
["id_pic"] => array(5) {
["name"] => array(2) {
[0] => string(5) "1.jpg"
[1] => string(5) "2.jpg"
}
["type"] => array(2) {
[0] => string(10) "image/jpeg"
[1] => string(10) "image/jpeg"
}
["tmp_name"] => array(2) {
[0] => string(27) "C:\Windows\Temp\php7A7E.tmp"
[1] => string(27) "C:\Windows\Temp\php7A7F.tmp"
}
["error"] => array(2) {
[0] => int(0)
[1] => int(0)
}
["size"] => array(2) {
[0] => int(77357)
[1] => int(56720)
}
}
}
name不相同時：
array(2) {
["id_pic_1"] => array(5) {
["name"] => string(5) "1.jpg"
["type"] => string(10) "image/jpeg"
["tmp_name"] => string(27) "C:\Windows\Temp\phpBBEE.tmp"
["error"] => int(0)
["size"] => int(77357)
}
["id_pic_2"] => array(5) {
["name"] => string(5) "2.jpg"
["type"] => string(10) "image/jpeg"
["tmp_name"] => string(27) "C:\Windows\Temp\phpBBEF.tmp"
["error"] => int(0)
["size"] => int(56720)
}
}
在對$_FILES進行foreach遍歷時，前面那種輸出格式不大方便。后面那種就可以直接遍歷。我們可以寫個方法進行統一轉換：
function dealFiles($files) {
$fileArray = array();
$n = 0;
foreach ($files as $key=>$file){
if(is_array($file['name'])) {
$keys = array_keys($file);
$count = count($file['name']);
for ($i=0; $i
$fileArray[$n]['key'] = $key;
foreach ($keys as $_key){
$fileArray[$n][$_key] = $file[$_key][$i];
}
$n++;
}
}else{
$fileArray = $files;
break;
}
}
return $fileArray;
}
好，前面講到后端如何處理接收到的$_FILES數組，并轉換成統一格式。接下來任務主要是：
1、檢測上傳的文件是否非法；
2、檢測上傳的文件是否超過大小；
3、檢測保存的路徑是否存在，是否可寫；
4、文件重命名；
其中上傳過程中用到了個很重要的函數：move_uploaded_file(filename , $destination )進行文件移動操作。將$_FILES['id_pic']['tmp_name']移動到新的路徑里。當然，移動前可以用is_uploaded_file($_FILES['id_pic']['tmp_name'])進行判斷文件是否正常上傳的。
多文件上傳則是循環的方法多次使用move_uploaded_file()進行移動操作。
第二種
主要以上傳圖片為主。
利用input的change事件，借助canvas對圖片進行處理(例如壓縮)，然后ajax發送文件流到后端。
基本原理是通過canvas渲染圖片，再通過 toDataURL 方法壓縮保存為base64字符串(能夠編譯為jpg格式的圖片)。
后端處理：
后端最終會收到前端發送的base64字符串，接著處理字符串為圖片即可。具體請使用關鍵字base64 轉 image 開發語言進行谷歌|百度。前端生成的結果中有一個base64Len，這是字符串的長度，后端應該核對以確認是否提交完整。參考：52fhy/localResizeIMG4: 前端本地客戶端壓縮圖片，兼容IOS，Android，PC、自動按需加載文件
//php示例：
$img = base64_decode($_POST['img']);
$img = imagecreatefromstring($img);
作者：飛鴻影
總結
以上是生活随笔為你收集整理的vue上传文件php,php文件上传 – 前端开发，JQUERY特效，全栈开发，vue开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1044. 火星数字(20)
- 下一篇： 动态规划算法php,php算法学习之动态