黑马在线教育项目---34-37、webuploader实现用户头像的异步上传
一、总结
一句话总结:
启迪:可以多看学习视频,在看电影看电视的时候看的确是不错的选择
1、关于软件的发行版本?
第1阶段:alpha版本,内测版本;
第2阶段:beta版本,公测版本;
第3阶段:RC版本,(Release Candidate)候选版本,主要任务进行项目排错;
第4阶段:Release版本,稳定的发行版本;
2、webuploader上传图片官方提供了样例比较完善的js?
也就是样例用的js代码:应该更加仔细的阅读文档
在案例中官网提供比较完善的js源码文件,可以参考:
https://fex.baidu.com/webuploader/js/getting-started.js
找到这个文件中的针对“图片上传demo”的部分,将其复制出来,粘贴到新建的一个JavaScript文件中,在视图中做引入即可。
3、chrome查看post请求携带的参数?
请求的Headers里面的Form Data里面可以查看
4、如何知道webuploader如何携带更多参数,比如_token?
可以在github上面查看issue,也可以直接百度
5、在storage门面中,有一个“磁盘”的概念,“磁盘”一共有三种:本地磁盘、公共磁盘、第三方磁盘,分别是什么(“磁盘”实质上就是一个目录)?
1:本地磁盘(local磁盘),存放在local磁盘中的文件是不能被浏览器访问到的,存储在其中的文件一般都是项目的php代码自身使用;【磁盘位置位于/Storage/app】
2:公共磁盘(public磁盘),存储在该磁盘中的文件一般是允许浏览器进行访问的;【磁盘位置位于:/Storage/app/public】
3:第三方磁盘:驱动形式的一种,允许开发者将文件上传到第三方的服务器上;
磁盘存在一个配置文件,位置/config/filesystems.php;
6、Storage门面的通用文件保存方法?
Storage::disk(磁盘名) -> put(文件名,文件的内容);
7、默认情况下,浏览器是无法访问到public磁盘目录,但是其又想让浏览器访问,所以需要做一个“软连接”的操作(当软连接创建好之后。Public磁盘中的内容会被同步到/public/storage下?
#php artisan storage:link
8、webuploader选择图片的时候也会显示之前的,也就是显示多个,这显然是错的,如何解决?
用jquery删除之前的就好:$('.thumbnail').remove()
二、webuploader实现用户头像的异步上传
异步:ajax 需要借助于ajax来实现目标的效果(无刷新)
由于异步的上传代码篇幅较大,也不好去调试,纯自己手写是很大的挑战,一般都会使用一些开源成型的jQuery插件。
插件:webuploader(基于jQuery开发,百度公司开发)
官网:https://fex.baidu.com/webuploader/
下载地址:https://github.com/fex-team/webuploader/releases
关于软件的发行版本:
第1阶段:alpha版本,内测版本;
第2阶段:beta版本,公测版本;
第3阶段:RC版本,(Release Candidate)候选版本,主要任务进行项目排错;
第4阶段:Release版本,稳定的发行版本;
①解压之后得到的目录结构(4个圈起来的是比较重要的):
②需要引入资源
a. 将需要使用的整个webuploader目录复制到当前的站点目录下
b. 在视图(views/admin/member/add.blade.php)中引入需要使用的js和css文件
引入css文件:
引入JavaScript文件:
③使用图片上传功能
地址:
https://fex.baidu.com/webuploader/getting-started.html#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0
a. 先引入html代码(创建选择文件的按钮,创建存放文件信息的容器),替换掉之前的文件选择按钮
b. 实例化webuploader实例(初始化操作)
在案例中官网提供比较完善的js源码文件,可以参考:
https://fex.baidu.com/webuploader/js/getting-started.js
找到这个文件中的针对“图片上传demo”的部分,将其复制出来,粘贴到新建的一个JavaScript文件中,在视图中做引入即可。
c. 将avatar.js文件在视图中引入
d. 根据实际的情况修改avatar.js文件
根据请求的数据,得知其上传文件的默认name值是file:
e. 根据路由信息,创建对应的控制器和方法去处理异步上传的请求
异步文件上传流程说明:
Ⅰ:产生异步的请求
Ⅱ:请求得有一个响应的方法(需要返回值,返回的内容是图片的路径;在此不需要进行数据表交互操作)
Ⅲ:当异步请求获取到响应之后需要存储图片的地址(但是又没必要给用户看地址,因此可以使用隐藏域的方式进行存储)
Ⅳ:当用户提交表单的时候顺带提交隐藏域地址
创建需要的控制器文件:
#php artisan make:controller Admin/UploaderController
创建需要的处理方法webuploader
f. 解决csrf的验证问题
由于异步提交和表单自身不是同一次请求,所以表单的csrftoken值不能被异步的ajax使用。
需要单独给ajax异步添加csrf的token值。
针对webuploader在上传的时候使用其他参数的说明,参考地址:
在框架中如果引入的外部文件,需要注意在外部文件中不能使用模版引擎技术的内容,否则不解析:
g. 实现上传处理方法
在larvel项目中除了在上传的时候可以使用move和store方法【都是request实例封装的】之外,还可以使用高级的上传文件保存方法(由storage门面提供的),详情可以参考手册:
Storage门面在使用的时候需要的注意事项:
Ⅰ:在storage门面中,有一个“磁盘”的概念,“磁盘”一共有三种:本地磁盘、公共磁盘、第三方磁盘;“磁盘”实质上就是一个目录
Ⅱ:本地磁盘(local磁盘),存放在local磁盘中的文件是不能被浏览器访问到的,存储在其中的文件一般都是项目的php代码自身使用;【磁盘位置位于/Storage/app】
Ⅲ:公共磁盘(public磁盘),存储在该磁盘中的文件一般是允许浏览器进行访问的;【磁盘位置位于:/Storage/app/public】
Ⅳ:第三方磁盘:驱动形式的一种,允许开发者将文件上传到第三方的服务器上;
Ⅴ:磁盘存在一个配置文件,位置/config/filesystems.php;
补充:默认情况下,浏览器是无法访问到public磁盘目录,但是其又想让浏览器访问,所以需要做一个“软连接”的操作(当软连接创建好之后。Public磁盘中的内容会被同步到/public/storage下):
#php artisan storage:link
Storage门面的通用文件保存方法:
Storage::disk(磁盘名) -> put(文件名,文件的内容);
成功之后的返回值:
h. 异步请求回调处理
添加隐藏域,用于存放地址:
编写回调代码:
i. 数据入表
j. 细节完善:在上传的时候只显示一个文件
修改的代码:
数据表的数据体现: