黑马在线教育项目---34-37、webuploader实现用户头像的异步上传

黑马在线教育项目---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在上传的时候使用其他参数的说明，参考地址：

https://github.com/fex-team/webuploader/issues/145

在框架中如果引入的外部文件，需要注意在外部文件中不能使用模版引擎技术的内容，否则不解析：

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. 细节完善：在上传的时候只显示一个文件

修改的代码：

数据表的数据体现：