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
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
这种情况会发生覆盖现象，总是以最后一个为准