vuejs+element-ui+laravel5.4上傳文件的示例代碼

前言

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了東平免費(fèi)建站歡迎大家使用！

之前的文章講得太多安裝了，今天就不說(shuō)這個(gè)了，因?yàn)槲业捻?xiàng)目是前后端分離的，所以基本是分開執(zhí)行代碼邏輯。其中還有跨域問(wèn)題，主要還是在laravel中添加頭信息放行之類的，這里會(huì)提一下做法。

element-ui的upload組件

我的vue代碼：

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

這里說(shuō)一下 on-preview與on-success都可以拿到

而:on-remove="handleRemove"為移除圖片時(shí)對(duì)應(yīng)的方法,:before-upload="handleBefore"

為上傳前的操作，這里我用于限制上傳的數(shù)量限制， :file-list="files"上傳后數(shù)據(jù)綁定在這里

這里我是使用:on-success="handleSuccess"來(lái)拿服務(wù)器的返回?cái)?shù)據(jù)的

在

export default {
  data(){
    return {
      files: [],
      uploadAction:'http://服務(wù)器地址'
    }
  },
  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跨域需要添加一個(gè)中間件

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

namespace App\Http\Middleware;

use Closure;

class Cors
{
  /**
   * Handle an incoming 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 路由

調(diào)用中間件來(lái)限制路由，這里用了dingo api，如不清楚請(qǐng)看前面的文章

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

配置Store

打開config/filesystems.php 找到 disks

'disks' => [

  // 上面還有很多，下面是自己加的
  // 新建一個(gè)本地端uploads空間（目錄） 用于存儲(chǔ)上傳的文件
    'uploads' => [

      'driver' => 'local',

      // 文件將上傳到storage/app/uploads目錄
      'root' => storage_path('app/uploads'),

      // 文件將上傳到public/uploads目錄 如果需要瀏覽器直接訪問(wèn) 請(qǐng)?jiān)O(shè)置成這個(gè)
      //'root' => public_path('uploads'),
    ],
]

開始上傳

新建一個(gè)上傳Controller, 下面很多判斷沒(méi)有做，自行做吧

AppApiV1ControllersUploadUploadFiles.php

namespace App\Api\V1\Controllers\Upload;


use Dingo\Api\Http\Request;
use Dingo\Api\Exception\StoreResourceFailedException;
use Storage;

class UploadFiles
{
  public function upfile(Request $request) {
    if (!$request->hasFile('file')) {
      return response()->json([], 500, '無(wú)法獲取上傳文件');
    }
    $file = $request->file('file');

    if ($file->isValid()) {
      // 獲取文件相關(guān)信息
      $originalName = $file->getClientOriginalName(); // 文件原名
      $ext = $file->getClientOriginalExtension();   // 擴(kuò)展名
      $realPath = $file->getRealPath();  //臨時(shí)文件的絕對(duì)路徑
      $type = $file->getClientMimeType();   // image/jpeg

      // 上傳文件
      $filename = date('Ymd/His');
      // 使用我們新建的uploads本地存儲(chǔ)空間（目錄）
      $path = $file->store($filename, 'uploads');
      return response()->json([
        'status_code' => 200,
        'message' => 'success',
        'photo' => $path,
        'name' => $originalName,
      ]);

    } else {
      return response()->json([], 500, '文件未通過(guò)驗(yàn)證');
    }
  }
}

到此，已經(jīng)可以放上全部要用到的代碼了，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：vuejs+element-ui+laravel5.4上傳文件的示例代碼
轉(zhuǎn)載源于：http://muchs.cn/article18/ghjhgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、面包屑導(dǎo)航、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容