前言
之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑。其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法。
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="/UploadFiles/2021-04-02/dialogImageUrl">这里说一下 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 "htmlcode">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 路由
调用中间件来限制路由,这里用了dingo api,如不清楚请看前面的文章
$api->version('v1', ['middleware' => 'cors'], function (Router $api) { $api->post('upfile', 'App\\Api\\V1\\Controllers\\Upload\\UploadFiles@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 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, '无法获取上传文件'); } $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, '文件未通过验证'); } } }到此,已经可以放上全部要用到的代码了,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】