国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

leap_frog / 1440人閱讀

摘要:前言之前的文章講得太多安裝了,今天就不說這個了,因為我的項目是前后端分離的,所以基本是分開執行代碼邏輯。其中還有跨域問題,主要還是在中添加頭信息放行之類的,這里會提一下做法。

前言

之前的文章講得太多安裝了,今天就不說這個了,因為我的項目是前后端分離的,所以基本是分開執行代碼邏輯。其中還有跨域問題,主要還是在laravel中添加頭信息放行之類的,這里會提一下做法。

element-ui的upload組件

我的vue代碼:


這里說一下 on-previewon-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, "文件未通過驗證");
        }
    }
}

到此,已經可以放上全部要用到的代碼了,喜歡的點個贊 =_=

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/25618.html

相關文章

  • vuejs+element-ui+laravel5.4上傳文件

    摘要:前言之前的文章講得太多安裝了,今天就不說這個了,因為我的項目是前后端分離的,所以基本是分開執行代碼邏輯。其中還有跨域問題,主要還是在中添加頭信息放行之類的,這里會提一下做法。 前言 之前的文章講得太多安裝了,今天就不說這個了,因為我的項目是前后端分離的,所以基本是分開執行代碼邏輯。其中還有跨域問題,主要還是在laravel中添加頭信息放行之類的,這里會提一下做法。 element-ui...

    MingjunYang 評論0 收藏0
  • 餓了么組件庫,element-ui開發精美的后臺管理系統系列之(一)開發伸縮菜單

    摘要:先看這個值即為判斷顯示展開還是收縮狀態的開關。這樣就實現了展開狀態下的菜單。如果有時間的話,我會把這個系列寫完,知道朋友們能獨立開發一個完整的的單頁面后臺管理程序。 涉及到路由,權限等等相關內容的部分,跟本文主旨關系不大,所以我將會在另外一篇文章中詳述,混在一起的話內容太多了 基于element-ui的左側可伸縮的菜單通過vuejs來開發支持展開收縮的菜單是非常簡單的,只需要v-i...

    whlong 評論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 評論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 評論0 收藏0

發表評論

0條評論

leap_frog

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<