tp5 webupload文件上传至七牛云
1:composer安装:
composer require qiniu/php-sdk
2:
配置使用:
在tp5.1的配置文件app.php中配置七牛云的参数

'qiniu' => [
'accesskey' => '你的accesskey',
'secretkey' => '你的secretkey',
'bucket' => '存储空间',
'domain' => '域名'
],
3: 前端
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> webuploader上传</title>
<!-- 引入webuploader上传-->
<link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css"> </head>
<body> <div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
<div class="formControls col-xs-4 col-sm-4">
<input type="hidden" value="/static/img/2.jpeg" name="icon" id="icon"/>
<img src="/static/img/2.jpeg" id="pic" name="icon" style="width: 50px;">
<button onclick="delimg()">删除图片</button>
</div>
</div>
<!--</form>-->
</body>
</html>
<!-- jq-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入webuploader上传-->
<script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>
/*文件上传*/
var uploader = WebUploader.create({
auto: true,
chunked: true, //是否要分片处理大文件上传
chunkSize: 2 * 1024 * 1024, //分片上传,每片2M
fileSizeLimit: 2 * 1024 * 1024 * 1024, // 所有文件总大小限制
fileSingleSizeLimit: 2 * 1024 * 1024 * 1024, // 单个文件大小限制
swf: '/webuploader/Uploader.swf',//文件接收服务端。
server: '/img/upfile',//文件接收服务端。
compress: {
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,
},
pick: {
id: '#picker',
// 是否开启选择多个文件的能力
multiple: false
},
accept: { //指定接受哪些类型的文件
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader;
//当文件被加入队列以后触发
uploader.on('fileQueued',function(file){
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" onclick="delUpload(this,'+i+','+num+');">' +
'<input type="hidden" name="img[]" id="'+file.id+'id" />'+
'<img>' +
'<div class="info">开始上传图片...</div>' +
'</div>'
),
$img = $li.find('img');
$("#fileList"+i).append($li);//图片添加到容器
var sum = $("#fileList"+i).find('.file-item').length;
if(sum >= num){
$("#filePicker"+i).attr('style','display:none;');
}
// 创建缩略图显示
uploader.makeThumb(file,function(error,src){
if (error){
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src',src);
},200,200);
});
// 文件上传过程中创建进度百分比实时显示。
uploader.on('uploadProgress',function(file,percentage){
$("#"+file.id+" .info").html('正在上传('+parseInt(percentage*100)+'%)');
}); //文件上传返回成功,判断是否成功上传到七牛
uploader.on('uploadSuccess', function(file,response){
if(response.code == 0){
$("#"+file.id+" .info").html('上传失败');
}else{
sumimg(num);
$("#"+file.id+" .info").html('上传完成,点击图片可删除');
$( '#'+file.id ).addClass('upload-state-done');
$( '#'+file.id+"id").val(response.data);//赋值到input
}
});
后端路由:
Route::get('img/create','img/img/create');
Route::post('img/upfile','img/img/upfile');
调用七牛
use Qiniu\Auth;
use Qiniu\Config;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;
控制器:
<?php namespace app\img\controller; use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use think\Controller;
use think\Request; class Img extends Controller
{ /**
* 显示创建资源表单页.
*
* @return \think\Response
*/
public function create()
{
//
return view('img/create');
} /**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function upfile(Request $request) {
// 初始化签权对象
$accesskey=config('qiniu.accesskey');
$secretkey=config('qiniu.secretkey');
$bucket=config('qiniu.bucket');
$domain=config('qiniu.domain');
$auth = new Auth($accesskey,$secretkey); $token = $auth->uploadToken($bucket); // 构建 UploadManager 对象
$uploadMrg = new UploadManager(); // 上传文件到七牛
$files = $_FILES;
$values = array_values($files);
$saveName = hash_file('sha1', $values[0]['tmp_name']) . time();
$this->assign('saveName',$saveName);
list($ret, $err) = $uploadMrg->putFile($token, $saveName, $values[0]['tmp_name']);
if ($err !== null) {
return getJsonData('500','上传图片失败','');
} else {
$data= 'http://' . $domain. '/' . $ret['key'];
return getJsonData('200','上传成功',$data);
}
} public function delete($id)
{
//
}
}
参考博客:
https://www.cnblogs.com/BearLee/p/10685018.html#4383580
tp5 webupload文件上传至七牛云的更多相关文章
- .Net Core实现将文件上传到七牛云存储
功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qini ...
- laravel7文件上传至七牛云并保存在本地图片
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...
- 微信小程序文件上传至七牛云(laravel7)
1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...
- Tp3.1 文件上传到七牛云
TP3.1 中不支持Composer 就无法用composer 安装 下载历史的SDK https://github.com/qiniu/php-sdk/releases/tag/v7.0.8 下载下 ...
- Java进阶学习:将文件上传到七牛云中
Java进阶学习:将文件上传到七牛云中 通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- 阿里云CentOS自动备份MySql 8.0并上传至七牛云
本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...
- Spring MVC 之文件上传(七)
SpringMVC同样使用了apache的文件上传组件.所以需要引入以下包: apache-commons-fileupload.jar apache-commons-io.jar 在springAn ...
- django + ckeditor + 七牛云,图片上传到七牛云
传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.
随机推荐
- vue v-model原理实现
v-model的实现原理: 基础用法: v-model 本质上不过是语法糖,可以用 v-model 指令在表单 <input>.<textarea> 及 <select& ...
- c语言字符串函数详解
转载请注明来源:https://www.cnblogs.com/hookjc/ oid *memset(void *dest, int c, size_t count); 将dest前面count个字 ...
- 运行时异常&编译时异常
/* 异常体系: --------| Throwable 所有错误或者异常的父类 --------------| Error(错误) --------------| Exception(异常) 异常一 ...
- 对常用I/O模型进行比较说明
一.IO模型的四个特性 关注的是消息通信机制,即调用者在等待一件事情的处理结果时,被调用者是否提供完成状态的通知. 同步:synchronous,被调用者并不提供事件的处理结果相关的通知消息,需要调用 ...
- Eclipse、MyEclipse中代码提示框颜色
Matching breackets highlight = 匹配括号突出显示 Completion proposal background = 提示框背景色 Completion proposal ...
- python官网导航翻译
- webhook触发jenkins进行sonar检测
目的 jenkins仅需创建一个job,git推送后自动进行sonar代码检测并上传到sonarqube jenkins插件 已按社区推荐安装基本插件 Generic Webhook Trigger ...
- Lesson17——NumPy 统计函数
NumPy 教程目录 1 NumPy 统计函数 NumPy 提供了很多统计函数,用于从数组中查找最小元素,最大元素,百分位标准差和方差等. 函数说明如下 1.1 统计 method descripti ...
- Netty核心原理
Netty核心原理 1. Netty介绍 1.1 原生NIO存在的问题 NIO的类库和API使用繁杂 需要具备其他额外的技能,如java多线程编程等才能编写出高质量的NIO程序 开发工作量和难度都非常 ...
- 天啦,从Mongo到ClickHouse我到底经历了什么?
前言: 在实现前端监控系统的最初,使用了 Mongo 作为日志数据存储库.文档型存储,在日志字段扩展和收缩上都能非常方便.天生的 JSON 格式和 NodeJs 配合也非常贴合.就这样度过了几个月的蜜 ...