小程序如何上线_vuejs+element

发布时间:2021-01-11 15:24 作者:jianzhan

摘要: vuejs+element-ui+laravel5.4提交文档的实例编码 element-ui的upload部件我的vue编码:template el-upload:action="uploadAction"list-type="picture-card":on-remove="ha

vuejs+element-ui+laravel5.4上传文件的示例代码       本篇文章主要介绍了vuejs+element-ui+laravel5.4上传文件的示例代码,具有一定的参考价值,有兴趣的可以了解一下

之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑。其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法。

element-ui的upload组件

我的vue代码:

 template 
 el-upload
 :action="uploadAction"
 list-type="picture-card"
 :on-remove="handleRemove"
 :ess="ess"
 :before-upload="handleBefore"
 :file-list="files" 
 i /i 
 /el-upload 
 el-dialog v-model="dialogVisible" size="tiny" 
 img width="100%" :src="dialogImageUrl" alt="" 
 /el-dialog 
 /template 

这里说一下 on-ess都可以拿到服务器的返回路径

其中:action="uploadAction"是服务器接引地址, list-type为限制上传格式

而:on-remove="handleRemove"为移除图片时对应的方法,:before-upload="handleBefore"

为上传前的操作,这里我用于限制上传的数量限制, :file-list="files"上传后数据绑定在这里

这里我是使用:ess="ess"来拿服务器的返回数据的

export default {
 data(){
 return {
 files: [],
 uploadAction:'/ 只让它上传一张
 handleRemove(file, fileList) {
 console.log(file, fileList)

laravel跨域

laravel跨域需要添加一个中间件

在app/Http/middleware下 新建文件Cors.php,输入

namespace App\Http\Middleware;
use Closure;
class Cors
 * Handle ing request.
 * @param \Illuminate\Http\Request $request
 * @param \Closure $next
 * @return mixed
 public function handle($request, Closure $next)
 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
 header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
 return $next($request);

在appHttpKernel.php

添加

 protected $routeMiddleware = [
 // some class
 'cors' = \App\Http\Middleware\Cors::class,
 ];

laravel 路由

调用中间件来限制路由,这里用了dingo api,如不清楚请看前面的文章

$api- version('v1', ['middleware' = 'cors'], function (Router $api) {
 $api- post('upfile', 'App\\Api\\V1\\Controllers\\Upload\\');
}

配置Store

找到 disks

'disks' = [
 // 上面还有很多,下面是自己加的
 // 新建一个本地端uploads空间(目录) 用于存储上传的文件
 'uploads' = [
 'driver' = 'local',
 // 文件将上传到storage/app/uploads目录
 'root' = storage_path('app/uploads'),
 // 文件将上传到public/uploads目录 如果需要浏览器直接访问 请设置成这个
 //'root' = public_path('uploads'),

开始上传

新建一个上传Controller, 下面很多判断没有做,自行做吧

AppApiV1ControllersUploadUploadFiles.php

namespace App\Api\V1\Controllers\Upload;

if (!$request- hasFile('file')) { return response()- json([], 500, '无法获取上传文件'); $file = $request- file('file'); if ($file- isValid()) { // 获取文件相关信息 $originalName = $file- getClientOriginalName(); // 文件原名 $ext = $file- getClientOriginalExtension(); // 扩展名 $realPath = $file- getRealPath(); //临时文件的绝对路径 $type = $file- getClientMimeType(); // image/jpeg // 上传文件 $filename = date('Ymd/His'); // 使用我们新建的uploads本地存储空间(目录) $path = $file- store($filename, 'uploads'); return response()- json([ 'status_code' = 200, 'message' = 'success', 'photo' = $path, 'name' = $originalName, } else { return response()- json([], 500, '文件未通过验证');

到此,已经可以放上全部要用到的代码了,希望对大家的学习有所帮助,也希望大家多多支持凡科。

  • 阿里巴巴P8构架师谈:最齐

    模拟题目:阿里巴巴巴巴P8架构师谈:最齐大中小型网站遍及式架构设计方案计划方案详尽表明!含详尽表明原材料! 遍及式架构设计方案计划方案是发展趋势为架构师的必不可少技术

  • 企业网站建设时的主页方

    原题目:企业网站建设时的主页方案如何做? 赶快来啦解一一下吧 首页也便是网站的第一店面,因此有关一个网站来讲首页是十分关键的。可是对一个好的主页制作来讲最大要便是整

  • 腾迅云网站大管家WAF感受

    原题目:腾迅云网站大管家WAF感受:聊一聊AI做为WAF销售市场转折点的发展趋势 从Gartner上年出示的数据信息看来,市面上上出示WAF计划方案的生产商仍然许多,终究WAF仍然是许多公司客

  • 免费建网站

    免费建网站:微盟小程序 网站描述: 微盟,智能商业服务提供商,为中小企业提供微商城、新零售、餐饮o2o、小程序等一体化解决方案,以更开放的服务生态为用户提供产品和服务,构

  • 微信小程序构建必须网络

    模拟题目:手机微信微信小程序搭建务必互联网网络服务器租用吗 对于手机微信微信小程序来说,互联网网络服务器的重要作用在于数据信息信息内容储存及功效开发设计设计方案的。