Thinkphp5图片上传正常，音频和视频上传失败的原因及解决

一、总结

一句话总结：php中默认限制了上传文件的大小为2M，查找错误的时候百度，且根据错误提示来查找错误。

我的实际问题是：

我的表单中有多个input:file且name字段都是n_content

这种情况会发生覆盖现象，总是以最后一个为准

1、上传时错误代码是4表示什么？

UPLOAD_ERR_OK 值：0; 没有错误发生，文件上传成功

UPLOAD_ERR_INI_SIZE 值：1; 上传的文件超过了 php.ini 中 upload_max_filesize选项限制的值

UPLOAD_ERR_FORM_SIZE 值：2;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值

UPLOAD_ERR_PARTIAL 值：3; 文件只有部分被上传

UPLOAD_ERR_NO_FILE 值：4;没有文件被上传， 值：5; 上传文件大小为0

2、上传文件的时候出现错误代码为4的最常见原因是什么？

php中默认限制了上传文件的大小，而我们没有在配置文件中改过来

问题在于大小受限，默认是2M，那么去php.ini改变文件大小即可咯！

3、如果修改了php版本中的php.ini，发现没有起效果，可能的原因是什么？

你需要去修改phpstudy或者wamp这样的服务器管理软件，因为里面可能关系到配置文件

左键点击此图标，移动到PHP对应版本处，有一个php.ini，点击后直接在打开的文件内修改大小限制（upload_max_filesize、post_max_size这两个文件）。

4、文件异步上传怎么实现？

用ajax就好

将同步改为ajax异步提交，同时改为formdata提交文件数据

34     btn.onclick = function() {

35         var val=document.getElementById("file").value;

36         if (val.length==0) {

37             return;

38         }

39         var fromData = new FormData(document.forms[0]);

40         fromData.append("test", "formdata");

41

42         var oAjax = new XMLHttpRequest();

43         oAjax.open('post', "uploadAjax", true);

44         oAjax.send(fromData);

45         oAjax.onreadystatechange = function() {

46             if (oAjax.readyState == 4) {

47                 if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {

48                     console.log(oAjax.responseText);

49                     var data=JSON.parse(oAjax.responseText);

50                     document.getElementById("see").setAttribute("src","/thinkphp"+data.src);

51                     document.getElementById("file").value="";

52                 } else {

53                     console.log(oAjax.status);

54                 }

55             }

56         };

57     }

5、表单中的文件上传方式是同步上传还是异步上传？

同步上传

6、前端校验文件类型的方式是什么？

弄一个允许的后缀数据

21     var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"];

将上传文件的后缀拿出来，然后和允许的后缀比较久可以了

24         var name=file.value;

25         var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase();

26         var res=promise.indexOf(ext);

27         if (res<0) {

28             alert("文件格式不正确");

29             document.getElementById("btn").disabled=true;

30         }else{

31             document.getElementById("btn").disabled=false;

32         }

二、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('image');

    // 移动到框架应用根目录/public/uploads/ 目录下

    if($file){

        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

        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>

     <div id="test"></div>

     <button id="btn">点击上传</button>

     <div>

         <img src="" id="see">

     </div>

     <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(".") + ).toLowerCase();

         var res=promise.indexOf(ext);

         if (res<) {

             alert("文件格式不正确");

             document.getElementById("btn").disabled=true;

         }else{

             document.getElementById("btn").disabled=false;

         }

     }

     btn.onclick = function() {

         var val=document.getElementById("file").value;

         if (val.length==) {

             return;

         }

         var fromData = new FormData(document.forms[]);

         fromData.append("test", "formdata");

         var oAjax = new XMLHttpRequest();

         oAjax.open('post', "uploadAjax", true);

         oAjax.send(fromData);

         oAjax.onreadystatechange = function() {

             if (oAjax.readyState == ) {

                 if (oAjax.status >=  && oAjax.status <  || oAjax.status == ) {

                     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('image');

     $test=request()->post("test");

     $src=[];//返回文件路径

     // 移动到框架应用根目录/public/uploads/ 目录下

     if($file){  

         $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

         if($info){

             // 成功上传后 获取上传信息

             // 输出 jpg

              $info->getExtension();

             // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg

              $info->getSaveName();

             // 输出 42a79759f284b767dfcb2a0197904287.jpg

              $info->getFilename(); 

              $src["src"]=DS.'public'.DS.'uploads'.DS.$info->getSaveName();

         }else{

             // 上传失败获取错误信息

              $file->getError();

         }

     };

         return json_encode($src);

     }

细节方面，比如上传之后报错返回信息没有做处理。

整体实现就是这样，作为一个常用的业务场景，这个本身还有很多改进的余地，比如删除已经上传的文件或者校验文件是否已经上传，如果上传不能二次上传或者删除掉前面上传的。当然如果文件名称不做处理而是原名称上传，则上传之后会覆盖原文件。

本文结束。

参考：

Thinkphp5图片、音频和视频文件上传 - 我站在山顶上 - 博客园
https://www.cnblogs.com/zhensg123/p/8819984.html

三、ThinkPHP5上传视频文件问题

我在windows10的操作系统安装wampserver软件，在此平台上运行thinkphp5.0框架，上传视频的时候发现只打印了文件名，文件扩展名（后缀）和临时路径都没有，反而error字段的值是1，即如下图：

这说明是有问题的，根据下面的列表可以知道错误的原因：

UPLOAD_ERR_OK 值：0; 没有错误发生，文件上传成功

UPLOAD_ERR_INI_SIZE 值：1; 上传的文件超过了 php.ini 中 upload_max_filesize选项限制的值

UPLOAD_ERR_FORM_SIZE 值：2;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值

UPLOAD_ERR_PARTIAL 值：3; 文件只有部分被上传

UPLOAD_ERR_NO_FILE 值：4;没有文件被上传， 值：5; 上传文件大小为0

所以，问题在于大小受限，默认是2M，那么去php.ini改变文件大小即可咯！

然而，我的问题就出在这，我是直接去对应版本的PHP目录下修改php.ini大小，但是似乎没起作用，一怒之下所有版本的php.ini文件大小限制都改了，还是没起作用，这我就纳闷了，忽然我想还有一个地方去改，如下图：

左键点击此图标，移动到PHP对应版本处，有一个php.ini，点击后直接在打开的文件内修改大小限制（upload_max_filesize、post_max_size这两个文件）。

修改后记得重启软件的服务哦！大功告成啦！！！

其实问题的原因在于apache目录里生成了一个php.ini快捷文件，这里才是真正用到的内容，所以，大家不要被迷惑了，也不要向博主这样粗心啦，哈哈。

参考：ThinkPHP5上传视频文件问题总结 - CSDN博客
https://blog.csdn.net/dmt742055597/article/details/78847791

四、多input:file下且name相同的上传问题

如下代码：

 <!-- 视频部分 -->

 <div class="student_note_type_item"  id="student_note_type_video">

     <div class="note_choose_group2">

         <button type="button" class="am-btn am-btn-sm  am-radius am-btn-success" id="note_student_video_online">手机录制视频</button>

         <button type="button" class="am-btn am-btn-sm  am-radius am-btn-secondary" id="note_student_video_local">选择手机视频</button>

     </div>

     <div>

         <div id="note_student_video_online_part" class="note_student_video_item">

             <div class="am-form-group">

                 <label for="n_content">手机录制视频</label>

                 <input type="file" id="n_content" name="n_content"  accept="video/*" capture="microphone">

             </div>

         </div>

         <div id="note_student_video_local_part" class="note_student_video_item" style="display: none;">

             <div class="am-form-group">

                 <label for="n_content">选择手机视频</label>

                 <input type="file" id="n_content"  name="n_content" accept="video/*">

                 <p class="am-form-help">请选择要上传的视频...</p>

             </div>

         </div>

     </div>

 </div>

 <!--END 视频部分 -->

 <!-- 音频部分 -->

 <div class="student_note_type_item"  id="student_note_type_audio">

     <div class="note_choose_group2">

         <button type="button" class="am-btn am-btn-sm  am-radius am-btn-success" id="note_student_audio_online">手机录制音频</button>

         <button type="button" class="am-btn am-btn-sm  am-radius am-btn-secondary" id="note_student_audio_local">选择手机音频</button>

     </div>

     <div>

         <div id="note_student_audio_online_part" class="note_student_audio_item">

             <div class="am-form-group">

                 <label for="n_content">手机录制音频</label>

                 <input type="file" id="n_content"  name="n_content"  accept="audio/*" capture="microphone">

             </div>

         </div>

         <div id="note_student_audio_local_part" class="note_student_audio_item" style="display: none;">

             <div class="am-form-group">

                 <label for="n_content">选择手机音频</label>

                 <!--                                              <input type="file" id="n_content" name="n_content" accept="audio/*">-->

                 <input type="file" id="n_content" name="n_content">

                 <p class="am-form-help">请选择要上传的音频...</p>

             </div>

         </div>

     </div>

 </div>

 <!--END 音频部分 -->

这个表单中有多个input:file且name字段都是n_content

这种情况会发生覆盖现象，总是以最后一个为准