Thinkphp5如何實現圖片、音訊和視訊檔案的上傳功能-ThinkPHP-PHP中文網

首頁

php框架

ThinkPHP

Thinkphp5如何實現圖片、音訊和視訊檔案的上傳功能

藏色散人

Jun 03, 2021 pm 03:53 PM

thinkphp5

以下由thinkphp框架教學專欄為大家介紹Thinkphp5實作圖片、音訊和視訊檔案的上傳功能方法，希望對需要的朋友有幫助！

首先是同步上傳，最為基礎的上傳的方式，點擊表單提交之後跳轉那種。

如下前端程式碼

<!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>

注意這裡的enctype必須enctype="multipart/form-data"，方案必須是post。

後端程式碼直接拿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();
    }
  };
 }

後面發現自己做的好簡單，於是改進了前端程式碼，並且前端程式碼實現了檔案類型校驗，將同步改為ajax異步提交，同時改為formdata提交文件數據，後台程式碼沒有太大變化，返回了提交文件的鏈接，而前端預覽只能預覽圖片。改過之後的前端程式碼為

<!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="/static/imghwm/default1.png"  data-src="" id="  class="lazy"   id="see" alt="Thinkphp5如何實現圖片、音訊和視訊檔案的上傳功能" >
  </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>

後端程式碼改進了一下

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);
  }

細節方面，例如上傳之後報錯回傳訊息沒有做處理。

整體實作就是這樣，作為一個常用的業務場景，這個本身還有很多改進的餘地，比如刪除已經上傳的文件或者校驗文件是否已經上傳，如果上傳不能二次上傳或者刪除掉前面上傳的。當然如果檔案名稱不做處理而是原名上傳，則上傳之後會覆蓋原始檔案。