• 黑马在线教育项目---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. 细节完善:在上传的时候只显示一个文件

    修改的代码:

    数据表的数据体现:

     
  • 相关阅读:
    Css颜色定义的方法汇总color属性设置方式
    关于css中的align-content属性详解
    关于char 指针变量char *=p;这个语句的输出问题
    事件绑定3
    事件绑定2
    事件绑定1
    XPath 初步讲解
    JSON初探
    CSS 媒体类型
    CSS Positioning(定位)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11730318.html
Copyright © 2020-2023  润新知