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