Vue+PHP+MySQL实现一次性多图片上传，js上传多张图片预览，QQ空间朋友圈微博图片动态发表（上）

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">&times;</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[]"