vuejs+element-ui+laravel5.4上传文件

MingjunYang 发布于2019-08-21 11:52 / 1136人阅读

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

前言

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

element-ui的upload组件

我的vue代码：

</>复制代码

这里说一下 on-preview与on-success都可以拿到服务器的返回路径
其中:action="uploadAction"是服务器接引地址, list-type为限制上传格式
而:on-remove="handleRemove"为移除图片时对应的方法,:before-upload="handleBefore"
为上传前的操作，这里我用于限制上传的数量限制， :file-list="files"上传后数据绑定在这里
这里我是使用:on-success="handleSuccess"来拿服务器的返回数据的
在

</>复制代码 
export default {
    data(){
        return {
            files: [],
            uploadAction:"http://服务器地址"
        }
    },
    methods: {
        handleSuccess(response){
            console.log(response)
            this.files = [{name: response.name, url: imgBaseUrl + response.photo}]
        },
        handleBefore(){
            return this.files.length === 1 ? false : true // 只让它上传一张
        },
        handleRemove(file, fileList) {
              console.log(file, fileList)
        }
    }
}

laravel跨域

laravel跨域需要添加一个中间件
在app/Http/middleware下新建文件Cors.php,输入

</>复制代码 
namespace AppHttpMiddleware;
use Closure;
class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $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" => AppHttpMiddlewareCors::class,
    ];

laravel 路由

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

</>复制代码 
$api->version("v1", ["middleware" => "cors"], function (Router $api) {
    $api->post("upfile", "AppApiV1ControllersUploadUploadFiles@upfile");
}

配置Store

打开config/filesystems.php 找到 disks

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

开始上传

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

</>复制代码 
namespace AppApiV1ControllersUpload;
use DingoApiHttpRequest;
use DingoApiExceptionStoreResourceFailedException;
use Storage;
class UploadFiles
{
    public function upfile(Request $request) {
        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, "文件未通过验证");
        }
    }
}

到此，已经可以放上全部要用到的代码了，喜欢的点个赞 =_=

GPU云服务器云服务器 element-ui element-ui dialog组件断点视频上传文件上传 js文件上传夹上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87216.html

vuejs+element-ui+laravel5.4上传文件

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

leap_frog 2019-06-28 13:23 评论0 收藏0
饿了么组件库，element-ui开发精美的后台管理系统系列之（一）开发伸缩菜单

摘要：先看这个值即为判断显示展开还是收缩状态的开关。这样就实现了展开状态下的菜单。如果有时间的话，我会把这个系列写完，知道朋友们能独立开发一个完整的的单页面后台管理程序。涉及到路由，权限等等相关内容的部分，跟本文主旨关系不大，所以我将会在另外一篇文章中详述，混在一起的话内容太多了基于element-ui的左侧可伸缩的菜单通过vuejs来开发支持展开收缩的菜单是非常简单的，只需要v-i...

whlong 2019-08-21 16:23 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0