Vue+PHP+MySQL实现一次性多图片上传，QQ空间朋友圈微博图片动态发表
1.功能描述
图片上传在大多Web项目中应该都是必备功能之一，单独上传一张图片比较容易实现，如果要一次性上传多张图片就会麻烦许多。不管是对前端还是后端来说，工作量都比上传单张照片要大得多。
这次的博客就来总结一下如何使用Vue+PHP实现一次性上传多张图片。
- 前端：Vue，Bootstrap (如果项目中没有这两个也没关系，不是主要因素)
- 后端：PHP、MySQL
2.效果展示
在进入主题之前，先看一下完成后的效果：
点击发送按钮后即可全部上传
上图是显示的效果
3.思路梳理
前端思路：
(1) 使用 fileReader 对象实现多图片的预览功能
(2) 使用 FormData 对象上传图片文件 （通过 Ajax 发起请求）
后端思路：
(1) 使用 Move_uploaded_file 函数上传图片，通过 for 循环上传多张图片
(2) 把所有图片（可能是多张）的 文件名 合并为一个字符串，图片名称之前使用 ； 隔开，把整个字符串存在 数据库的 mood_pic 字段中
4.实现步骤（1）前端部分
提醒：前端我使用的是Vue+Bootstrap框架，如果你用的不是这两个框架也没关系，可以只用input表单元素+div来替代，这个不是最主要的。
HTML页面:
<div class="modal fade" id="sendmood" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">## 标题
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">发布心情</h4>
</div>
<div class="modal-body">
<form class="form" id="formMood" style="margin-top:10px;">
<div class="form-group input100">
<textarea name="mood_body" v-model="mood_body" class="form-control input100" rows="5" required style="resize:none;" ></textarea>
</div>
<div class="form-group">
<input type="file" @change="picListChange" name="mood_pic[]" multiple id="mood_pic">
//上传图片的input
//点击时调用picListChange函数，监听图片的改变
</div>
<div id="picNum">
//这里显示一个p标签，提醒用户当前选择了多少张图片
</div>
<div id="uploadPicList" style="height:10rem;display:flex;flex-wrap:nowrap;overflow:scroll;">
//这里是一个图片列表，用于预览所选图片
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="sendMood"><span class="glyphicon glyphicon-send"></span> 发送</button>
// 发送动态按钮
<button type="button" class="btn btn-default" @click="cancelMood">取消</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
javascript代码：实现预览图
picListChange(){
$("#picNum").html(''); //每次清空上一次的预览结果
$("#uploadPicList").html(''); //每次清空上一次的预览结果
var file = document.getElementById('mood_pic').files;
var $errorNum = 0; //记录不符合要求图片的数目，这里要求图片大小不能大于5M
for(var i=0;i<file.length;i++)
{
if(i>=9) //限制每次最多上传9张图片
{
$errorNum++;
continue;
}
else
{
if(file[i].size>=5242880)
{
console.log('图片大小不能超过5M,已为您自动过滤');
$errorNum++;
}
else{
//创建读取文件对象
var reader = new FileReader();
//读取文件
reader.readAsDataURL(file[i]); //读取file的数据，转换成base64格式的图片
//在回调函数中修改Img的src属性
reader.onload = function () {
var img = document.createElement("img"); //新建一个img标签
img.setAttribute('width','50px');
img.setAttribute('height','50px');
img.src = this.result;
$("#uploadPicList").append(img);
img=null;
}
}
}
}
$("#picNum").prepend('<p>已选择'+parseInt(file.length-$errorNum)+'张图片</p>')
//回显已选择图片的数目
}
javascript代码：使用Ajax上传表单和图片
sendMood(){
var vueself = this; //先保存一个vue的this指针
var file1 = document.getElementById('mood_pic').files; //获取input元素的files属性
if((file1.length==0&&this.mood_body=='')||(file1.length==0&&this.mood_body.trim().length==0))
{
return 0;//如果内容为空，则退出
}
var formdata = new FormData();
for(var i=0;i<file1.length;i++)
{
//使用for循环添加图片
if(i>=9)
continue; //图片数目不能大于9
else{
if(file1[i].size<=5242880) //上传图片不能超过5M
{
formdata.append("mood_pic[]",file1[i]);
/*注意，这里的双引号里的变量名称后面必须要加上[]*/
}
}
}
console.log('这里新建一个新的FormData对象来打包前端的数据');
console.log('原始的Form表单的serialize函数无法上传图片，因此需要使用FormData对象');
formdata.append('mood_id',this.myinfo.user_id+this.getNowFormatDate());
//getNowFormatDate是我自定义的获取当前时间的函数
formdata.append('user_id',this.myinfo.user_id);
formdata.append('mood_body',this.mood_body);
formdata.append('mood_date','2019'); //我自定义
formdata.append('sendDate','2019');
console.log(formdata);
$.ajax({
type:'POST',
url:'../server/mood.php',
data:formdata,
cache: false, **//重要**
processData: false, **//重要**
contentType: false, **//重要**
success:function(res)
{
if(res.code==1)
{
vueself.mood_body='';
$("#picNum").html('');
$("#mood_pic").val('');
$("#uploadPicList").html('');
$("#sendmood").modal('hide');
vueself.getAllMood('add');
}
else{
alert('发送失败');
}
},
error:function(jqXHR){
alert('请求发送失败，原因是:'+jqXHR)
}
})
}
PHP代码：上传文本+图片，mood.php
<?php
header('Content-Type:application/json; charset=utf-8');
$mood_id = md5($_POST[mood_id]); //生成并加密动态id
$user_id = $_POST[user_id]; //获取用户id
$mood_body = $_POST[mood_body]; //获取动态的文本
$mood_date = $_POST[mood_date]; //获取发送日期
$sendDate = $_POST[sendDate];
$i=0;
$savepath = 'D:/xampp/htdocs/carelesswhisper/src/img/'.$user_id.'/';
//打开进入用户的文件夹
if(!empty($_FILES['mood_pic'])) //使用数组判断当前是否上传了图片
{
foreach ($_FILES['mood_pic']['name'] as $key=>$value) {
if(
($_FILES["mood_pic"]["type"][$key] == "image/gif")
|| ($_FILES["mood_pic"]["type"][$key] == "image/jpeg")
|| ($_FILES["mood_pic"]["type"][$key] == "image/jpg")
|| ($_FILES["mood_pic"]["type"][$key] == "image/pjpeg")
|| ($_FILES["mood_pic"]["type"][$key] == "image/x-png")
|| ($_FILES["mood_pic"]["type"][$key] == "image/png")
)
{
$imgType = explode('.',$_FILES['mood_pic']['name'][$key])[1];
//设置照片的存放相对路径和命名。命名照片例：20161226_2.png，下划线后跟遍历的键值区分照片，可在此处自行设置规则！！
$imgName = md5($user_id.$sendDate.'-'.$i).'.'.$imgType;
//将上传的文件移动到新位置
move_uploaded_file($_FILES['mood_pic']['tmp_name'][$key],$savepath.$imgName);
$mood_pic=$imgName.';'.$mood_pic;
//所有图片的名称串成一个字符串，将会存储在数据库的字段中
$i=$i+1;
}
}
}
else{
$mood_pic='';
}
$conn = new mysqli("localhost:3306", "root", "", "personal");
if($conn!=null)
{
$conn->query("INSERT INTO personal_mood VALUES('$mood_id','$user_id','$mood_body',' $mood_date','$mood_pic')");
$conn->close();
$result = ['code'=>'1','msg'=>'发送成功'];
echo json_encode($result);
}?>
5.总结
① 前端部分
上传文件需要使用 FormData 对象，而不是表单的 serialize 函数
回显图片功能使用的是 fileReader 对象，关于这个对象的其他功能今后还要继续了解
②后端部分
使用 PHP 上传文件时，要确保保存的路径以及保存的文件名是否正确
使用 PHP 上传大型文件时，可能会收到服务器的限制，因此需要手动更改 PHP 每次上传文件的最大内存限制，否则文件会上传失败。
————————————————
版权声明：本文为CSDN博主「joey无心快语」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41564928/article/details/90319238
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
