您的位置:首页 > 编程语言 > PHP开发

Laravel 七牛云上传图片

2018-02-02 17:15 519 查看
Laravel七牛云上传图片DEMO

// html文件
@extends('layouts.admin')

@section('title', '上传文件')

@section('content')
<!--我是主要内容 start-->
<ul class="breadcrumb" style="font-size: 16px;">
<li><a href="#">首页</a></li>
<li><a href="{{ url('admin/files/index') }}">文件管理</a></li>
<li class="active">上传文件</li>
</ul>
<div class="row">
<div class="col-md-2 col-md-offset-9">
<button type="button" class="btn btn-success" onclick="window.history.go(-1);">返回文件列表</button>
</div>
</div>
<form class="form-horizontal">
{{csrf_field()}}
<div class="form-group">
<label for="file_title" class="col-sm-2 control-label">文件标题</label>
<div class="col-sm-6">
<input type="text" name="file_title" class="form-control" id="file_title" placeholder="请输入文件标题">
</div>
</div>
<div class="form-group">
<label for="file_path" class="col-sm-2 control-label">文件缩略图</label>
<input class="form-conrol col-sm-6 uploadImg" type="file" id="file_path">
<div class="col-sm-6" style="margin-top: 10px;">
<img src="" title="文件缩略图" width="100" class="img-rounded img-responsive file_path"/>
<input type="hidden" name="file_path" id="banner_img" value=""/>
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-2 control-label">状态</label>
<label class="radio-inline">
<input type="radio" name="status" value="0"> 草稿
</label>
<label class="radio-inline">
<input type="radio" name="status" value="1" checked> 发布
</label>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success btn-lg" onclick="submitBtn();"> 保 存</button>
<button type="button" class="btn btn-warning btn-lg" style="margin-left: 30px;" onclick="window.history.go(-1);"> 返 回</button>
</div>
</div>
</form>
<!--我是主要内容 end-->
@endsection
@section('my-js')
<
dc79
script>
function submitBtn() {
var file_title = $('input[name=file_title]').val();
var file_path = $('input[name=file_path]').val();
if(file_title === '') {
layer.msg('banner标题不能为空');
return;
}
if(file_path === '') {
layer.msg('banner缩略图不能为空');
return;
}
var data = $('.form-horizontal').serialize();
$.ajax({
type: "POST",
url: "/admin/file/create",
data: data,
dataType: 'json',
cache: false,
success: function (data) {
if(data.code === 0) {
swal({
title: data.msg,
text: '',
type: 'success',
timer: 1000,
onOpen: () => {
swal.showLoading();
},
onClose: () => {
location.href = '/admin/banner/index';
}
})
}else{
layer.msg(data.msg);
}
}
});
}

// 上传图片
$("#file_path").change(function () {
layer.msg('文件上传中,请稍等...', {
shade: [0.3]
});
var formData = new FormData();
formData.append("file", $('#file_path')[0].files[0]);
formData.append("_token", "{{csrf_token()}}");
$.ajax({
type: "POST",
url: "/admin/file/upload",
data: formData,
dataType: 'json',
processData: false,
contentType: false,
cache: false,
success: function (data) {
if(data.code === 0) {
layer.msg('文件上传成功');
$('.file_path').attr('src', data.src);
$('#banner_img').val(data.data);
}
}
});
});
</script>

@endsection


// 服务器端
1.composer require itbdw/laravel-storage-qiniu
2.编辑 config/app.php
providers 加上一行  itbdw\QiniuStorage\QiniuFilesystemServiceProvider::class,
3.编辑config/filesystems.php,添加
'qiniu' => [
'driver'    => 'qiniu',
'domain'    => 'xxxxx.bkt.clouddn.com',  //你的七牛域名
'access_key'=> '',    //AccessKey
'secret_key'=> '',   //SecretKey
'bucket'    => '',    //Bucket名字,即七牛云存储空间名称
],
4.上传方法
public function upload()
{
$disk = \Storage::disk('qiniu'); //使用七牛云上传
$time = date('Y-m-d');
$filename = $disk->put($time, request()->file('file'));//上传
if(!$filename) {
return response()->json(['code' => 1, 'msg' => '上传失败']);
}
$img_url = $disk->getDriver()->downloadUrl($filename); //获取下载链接
return response()->json(['code' => 0, 'msg' => '上传成功', 'src' => $img_url]);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Laravel 七牛云