VUE+axios+php实现图片上传

 更新时间:2022年08月15日 11:10:56   作者:发量堪忧的小伙子  
这篇文章主要为大家详细介绍了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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue.js+HighCharts实现动态请求展示时序数据

    Vue.js+HighCharts实现动态请求展示时序数据

    这篇文章主要为大家详细介绍了Vue.js+HighCharts实现动态请求展示时序数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue与bootstrap实现时间选择器的示例代码

    vue与bootstrap实现时间选择器的示例代码

    本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • 使用vue + less 实现简单换肤功能的示例

    使用vue + less 实现简单换肤功能的示例

    下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 深入了解Vue3 中 this的使用

    深入了解Vue3 中 this的使用

    在Vue3中,this的使用方式与Vue2存在较大差异,尤其是在引入组合式API后,本文详细解析了Vue3中this的使用情况、底层源码和设计理念,并提供了面试技巧,感兴趣的可以了解一下
    2024-09-09
  • Vue组件封装上传图片和视频的示例代码

    Vue组件封装上传图片和视频的示例代码

    这篇文章主要介绍了Vue封装上传图片和视频的组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • vue如何动态绑定img的src属性(v-bind)

    vue如何动态绑定img的src属性(v-bind)

    这篇文章主要介绍了vue如何动态绑定img的src属性(v-bind),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue项目中跨域问题解决方案

    Vue项目中跨域问题解决方案

    本文给大家介绍了vue项目中跨域问题的完美解决方案,通过更改header,使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建),具体内容详情大家跟随脚本之家小编一起学习吧
    2018-06-06
  • vue data有值,但是页面{{}} 取不到值的解决

    vue data有值,但是页面{{}} 取不到值的解决

    这篇文章主要介绍了vue data有值,但是页面{{}} 取不到值的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 如何使用vue-cropper裁剪图片你知道吗

    vue 如何使用vue-cropper裁剪图片你知道吗

    这篇文章主要为大家介绍了vue 使用vue-cropper裁剪图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 浅谈Vue3.0新版API之composition-api入坑指南

    浅谈Vue3.0新版API之composition-api入坑指南

    这篇文章主要介绍了Vue3.0新版API之composition-api入坑指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论