在做社区或者商城时,难免遇到多图上传问题,这里分享一个多图上传到七牛案例。

本案例的前端js交互是在jq22官网下载的多图上传的demo,自行封装放入laravel中运行并将其异步上传到七牛云存储。

在这里特别感谢IT兄弟会前端大神ZXZ的前车之鉴。

这个组件在使用的时候有很多坑,不过博主已经踩完了,这里就只给大家介绍我修改之后的案例把,包你五分钟拿下laravel中多图上传。

一、gitlab上拉取案例代码

gitlab地址:https://github.com/gq957534377/-

二、配置文件夹目录到你的larrvel项目中并作相应配置

下载下来之后的文件目录如图:

下载如图

  1. 将静态资源文件“css”,”js”,”src”目录放置到自己的项目静态资源目录下。
  2. 将add.blade.php放置到resoue/view的视图目录下

    当然这里也可以将本页面放置到form表单或者其他谈框等自行设计。

  3. 在“Common.php中有获取七牛上传的token方法”如图:

    其中需要你七牛的三个key,这三个key我是配置到了我的配置文件中,方便一键更换,没有七牛的请先申请注册。

    配置如图:

  4. 编写控制器方法,设置路由,作为请求七牛token的对外接口,代码如图:

    路由如图:

  5. 配置前端blade页面和上传图片组件的一些配置

    • blade:

    • js:

      底层方法:

      外部实例化调用:

三、运行测试

  1. 浏览器输入所设置的返回该上传图片blade视图模板的路由

    如图:

  2. 上传

    如图:

四、好,到这里就结束了,你可以痛快的去玩他了,对了她还支持响应式和手机表情哦!!!!

  1. 觉得有用的记得打赏哦,微信支付宝见下图:

    • 微信:

    • 支付宝:

  2. 博主摒着开源精神,手码不易,欢迎转发评论,但是请注明来源作者,后果自负!

您的支持是对我最大的鼓励!