VUE+axios+php实现图片上传
作者:发量堪忧的小伙子
这篇文章主要为大家详细介绍了VUE+axios+php实现图片上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE+axios+php实现图片上传的具体代码,供大家参考,具体内容如下
前端部分
执行函数,注意file那有个await,获取到文件数据后,装在FormData里面,然后调用下文axios的uploadFile
async uploadFiles() { let inputObj = document.createElement("input"); let file = await new Promise((res) => { inputObj.setAttribute("id", "file"); inputObj.setAttribute("type", "file"); inputObj.setAttribute("name", "file"); inputObj.setAttribute("style", "visibility:hidden"); document.body.appendChild(inputObj); inputObj.click(); document.querySelector("#file").addEventListener("change", (e) => { console.log(e.target.files); res(e.target.files) }); }); let formdata = new FormData() formdata.append('myFile', file[0]) await this._http.uploadFile(formdata).then(console.log); document.body.removeChild(inputObj) },
http请求集中管理
async uploadFile(file) { return axios.post(`/Upload.php`,file,{ headers: {"Content-Type": "multipart/form-data"} }) }
php后端部分
接收参数,调用uploadFile
<?php header('content-type:text/html;charset=utf-8'); $fileInfo=$_FILES["myFile"]; $maxSize=10485760;//10M,10*1024*1024 $allowExt=array('jpeg','jpg','png','tif'); $path="uploads"; include_once 'UploadFile.php'; uploadFile($fileInfo, $path, $allowExt, $maxSize);
封装uploadFile函数
<?php function uploadFile($fileInfo, $path, $allowExt, $maxSize) { $filename = $fileInfo["name"]; $tmp_name = $fileInfo["tmp_name"]; $size = $fileInfo["size"]; $error = $fileInfo["error"]; $type = $fileInfo["type"]; //服务器端设定限制 $ext = pathinfo($filename, PATHINFO_EXTENSION); //目的信息 if (!file_exists($path)) { mkdir($path, 0777, true); chmod($path, 0777); } $uniName = md5(uniqid(microtime(true), true)) . '.' . $ext; $destination = $path . "/" . $uniName; if ($error == 0) { if ($size > $maxSize) { exit("上传文件过大!"); } if (!in_array($ext, $allowExt)) { exit("非法文件类型"); } if (!is_uploaded_file($tmp_name)) { exit("上传方式有误,请使用post方式"); } //判断是否为真实图片(防止伪装成图片的病毒一类的 if (!getimagesize($tmp_name)) { //getimagesize真实返回数组,否则返回false exit("不是真正的图片类型"); } if (@move_uploaded_file($tmp_name, $destination)) { //@错误抑制符,不让用户看到警告 echo "文件" . $filename . "上传成功!"; } else { echo "文件" . $filename . "上传失败!"; } } else { switch ($error) { case 1: echo "超过了上传文件的最大值,请上传2M以下文件"; break; case 2: echo "上传文件过多,请一次上传20个及以下文件!"; break; case 3: echo "文件并未完全上传,请再次尝试!"; break; case 4: echo "未选择上传文件!"; break; case 7: echo "没有临时文件夹"; break; } } return $destination; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。