Comment Thinkphp5 implémente la fonction de téléchargement d'images, de fichiers audio et vidéo-PensezPHP-php.cn

Comment Thinkphp5 implémente la fonction de téléchargement d'images, de fichiers audio et vidéo

藏色散人

Libérer： 2021-06-04 11:07:15

avant

2998 Les gens l'ont consulté

Ce qui suit est la colonne du didacticiel du cadre thinkphp pour vous présenter comment implémenter la fonction de téléchargement d'images, de fichiers audio et vidéo dans Thinkphp5. J'espère que cela vous sera utile. amis dans le besoin !

La première est le téléchargement synchrone. La méthode de téléchargement la plus basique consiste à sauter après avoir cliqué sur le formulaire Soumettre.

Le code frontal suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  <form action="upload" enctype="multipart/form-data" method="post">
    <input type="file" name="image" />
    <br>
    <input type="submit" value="上传" />
  </form>
</body>
</html>

Copier après la connexion

Notez que le enctype doit êtreenctype="multipart/form-data" et la solution doit être post.

Pour le code back-end, prenez simplement l'exemple de code du site officiel tp5 :

 public function upload(){
  // 获取表单上传文件 例如上传了001.jpg
  $file = request()->file(&#39;image&#39;);
  // 移动到框架应用根目录/public/uploads/ 目录下
  if($file){
    $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
    if($info){
      // 成功上传后 获取上传信息
      // 输出 jpg
      echo $info->getExtension();
      // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
      echo $info->getSaveName();
      // 输出 42a79759f284b767dfcb2a0197904287.jpg
      echo $info->getFilename();
    }else{
      // 上传失败获取错误信息
      echo $file->getError();
    }
  };
 }

Copier après la connexion

Plus tard, j'ai découvert que ce que je faisais était très simple, j'ai donc amélioré le code front-end, et le code frontal a implémenté la vérification du type de fichier. La synchronisation a été modifiée en soumission asynchrone ajax, et les données du fichier ont été soumises à formdata. Le code d'arrière-plan n'a pas beaucoup changé et le lien pour soumettre le fichier a été renvoyé, tandis que le code frontal a implémenté la vérification du type de fichier. l'aperçu de fin ne pouvait prévisualiser que les images. Le code frontal modifié est

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
</head>
<body>
  <form action="uploads1a" id="myform">
    <input type="file" name="image" id="file" />
  </form>
  <p id="test"></p>
  <button id="btn">点击上传</button>
  <p>
    <img src="" id="see">
  </p>
  <script type="text/javascript">
  var btn = document.getElementById("btn");
  var file=document.getElementById("file");
  var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"];
  file.onchange=function(){
    var name=file.value;
    var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase();
    var res=promise.indexOf(ext);
    if (res<0) {
      alert("文件格式不正确");
      document.getElementById("btn").disabled=true;
    }else{
      document.getElementById("btn").disabled=false;
    }
  }
  btn.onclick = function() {
    var val=document.getElementById("file").value;
    if (val.length==0) {
      return;
    }
    var fromData = new FormData(document.forms[0]);
    fromData.append("test", "formdata");
    var oAjax = new XMLHttpRequest();
    oAjax.open(&#39;post&#39;, "uploadAjax", true);
    oAjax.send(fromData);
    oAjax.onreadystatechange = function() {
      if (oAjax.readyState == 4) {
        if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
          console.log(oAjax.responseText);
          var data=JSON.parse(oAjax.responseText);
          document.getElementById("see").setAttribute("src","/thinkphp"+data.src);
          document.getElementById("file").value="";
        } else {
          console.log(oAjax.status);
        }
      }
    };
  }
  </script>
</body>
</html>

Copier après la connexion

et le code back-end a été amélioré

public function uploadAjax(){
    // 获取表单上传文件 例如上传了001.jpg
  $file = request()->file(&#39;image&#39;);
  $test=request()->post("test");
  $src=[];//返回文件路径
  // 移动到框架应用根目录/public/uploads/ 目录下
  if($file){
    $info = $file->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
    if($info){
      // 成功上传后 获取上传信息
      // 输出 jpg
       $info->getExtension();
      // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
       $info->getSaveName();
      // 输出 42a79759f284b767dfcb2a0197904287.jpg
       $info->getFilename();
       $src["src"]=DS.&#39;public&#39;.DS.&#39;uploads&#39;.DS.$info->getSaveName();
    }else{
      // 上传失败获取错误信息
       $file->getError();
    }
  };
    return json_encode($src);
  }

Copier après la connexion

dans les détails, comme les informations de retour d'erreur après le téléchargement ne sont pas traitées.

La mise en œuvre globale est la suivante. En tant que scénario commercial courant, il reste encore beaucoup à faire, comme supprimer le fichier téléchargé ou vérifier si le fichier a été téléchargé si le téléchargement ne peut pas être téléchargé. à nouveau ou supprimé Téléchargé plus tôt. Bien entendu, si le nom du fichier n'est pas traité et que le nom d'origine est téléchargé, le fichier original sera écrasé après le téléchargement.