87,993
社区成员
发帖
与我相关
我的任务
分享WebUploader上传组件+七牛的问题
各位老师：
我是初学者，最近在尝试WebUploader上传组件+七牛实现图片的上传和存储，请问：
1、上传时，前端向服务器端（PHP）请求token怎么实现？（压缩包内附七牛官方JS SDK、PHP SDK和我的accessKey、secretKey信息）
2、上传七牛空间后，文件名采用（年月日时分秒毫秒+图片扩展名）的方式命名（年采用四位数，月日时分秒全部采用两位数），如：20170126113520142554587.jpg，请问该如何实现？
我是菜鸟，对JS、PHP只是有所了解而已，自己折腾了几天，实在没法实现我想要的功能。请各位大侠在百忙中帮我改改。万分感激！
WebUploader上传组件+七牛 文件下载
我是初学者，最近在尝试WebUploader上传组件+七牛实现图片的上传和存储，请问：
1、上传时，前端向服务器端（PHP）请求token怎么实现？（压缩包内附七牛官方JS SDK、PHP SDK和我的accessKey、secretKey信息）
2、上传七牛空间后，文件名采用（年月日时分秒毫秒+图片扩展名）的方式命名（年采用四位数，月日时分秒全部采用两位数），如：20170126113520142554587.jpg，请问该如何实现？
我是菜鸟，对JS、PHP只是有所了解而已，自己折腾了几天，实在没法实现我想要的功能。请各位大侠在百忙中帮我改改。万分感激！
WebUploader上传组件+七牛 文件下载
...全文
请发表友善的回复…
发表回复
最初的梦想2014 2017-10-25
- 打赏
- 举报
你搞定了没？ 我搞定了
worht1wl 2017-03-21
- 打赏
- 举报
我不知道其他大神怎么弄的，我是在外部生成token，然后在图片要开始前，把token赋值过去
uploader.options.formData.token = token;worht1wl 2017-02-23
- 打赏
- 举报
我没搞个，你看这样行不行：
设置个变量var a，ajax调用获取token的方法返回token，把返回的token赋值给变量a。初始化控件时，再把变量a赋值给formData中的token
redlz2500 2017-02-08
- 打赏
- 举报
页面打开后，不初始化webUploader，初始webUploader前向服务器查询当前的token
token返回后初始化webuploader将值写在formData里面
var uploader;
$.post('quicktoken.php',function(data){
webuploader_init(data);
});
function webuploader_init(token){
uploader=webuploader.create({
//...
formData:{
token:data
},
//...
});
}
//quicktoken.php
session_start();
echo(session_id());
文件名的用这个：
date('YmdHisu',time());
o0风箫吟0o 2017-02-07
- 打赏
- 举报
请大神帮帮我啊。
o0风箫吟0o 2017-01-30
- 打赏
- 举报
感谢版主回复，祝版主春节快乐！
我刚接触PHP，所以对PHP的理解太浅，我参照版主的代码依然没有成功。
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
formData: {
uptoken_url: '../examples/upload_token.php',
token: "<%?php echo $upToken;%>"
// 这里如果用外部生成的token，能够上传成功。
//token: "InMHn40lDxudpYJjI_o-ijnFqppL9j2Wa3Cx-wBz:7goQHZ6CQzquwUfUhyTxMqVzgcM=:eyJzY29wZSI6InlhdG9vaG91c2UiLCJkZWFkbGluZSI6MzE1MzYwMDAwMDB9"
},
dnd: '#dndArea',
paste: '#uploader',
swf: './SWF/Uploader.swf',
chunked: true, // 开起分片上传
chunkSize: 4 * 1024 * 1024,
server: 'http://up.qiniu.com/',
resize: false, // 不压缩image
// runtimeOrder: 'flash',
duplicate: false, // 是否去重
// 只允许选择图片
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// 配置缩略图
trumb: {
width: 110,
height: 110,
quality: 90, // 图片质量，只有type为`image/jpeg`的时候才有效。
allowMagnify: false,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
crop: true, // 是否允许裁剪。
// type: 'image/jpeg' // 为空的话则保留原有图片格式，否则强制转换成指定的类型。
},
// 配置图片的压缩选项
compress: {
width: 1800,
height: 1800,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 100,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 3 *1024 * 1024
},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,
fileNumLimit: 100, // 验证文件总数量
fileSizeLimit: 300 * 1024 * 1024, // 300 M 验证文件总大小
fileSingleSizeLimit: 20 * 1024 * 1024 // 20 M 验证单个文件大小
});
斯洛文尼亚旅游 2017-01-27
- 打赏
- 举报
token: "<%?php echo $upToken;%>"
o0风箫吟0o 2017-01-26
- 打赏
- 举报
也就是说，我现在这个Demo是可以正常上传的，但我是把token写死了的（token由外部生成的），我想在上传时再向我的服务器请求，服务器端的PHP该如何写？目前我参照的是官方PHP SDK里面的代码，但无法成功。
<?php
require_once __DIR__ . '/../autoload.php';
use Qiniu\Auth;
$accessKey = 'InMHn40lDxudpYJjI_o-ijnFqppL9j2Wa3Cx-wBz';
$secretKey = 'Xx_uXIeTjvQyiP-nrWoCtd5Ql4QdtnXjSSo-1HJw';
$auth = new Auth($accessKey, $secretKey);
$bucket = 'yatoohouse';
$upToken = $auth->uploadToken($bucket);
echo $upToken;
o0风箫吟0o 2017-01-26
- 打赏
- 举报
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择图片'
},
formData: {
// 这里的token是外部生成的长期有效的，如果把token写死，是可以上传的。
token: "InMHn40lDxudpYJjI_o-ijnFqppL9j2Wa3Cx-wBz:7goQHZ6CQzquwUfUhyTxMqVzgcM=:eyJzY29wZSI6InlhdG9vaG91c2UiLCJkZWFkbGluZSI6MzE1MzYwMDAwMDB9"
// 我想上传时再请求服务器返回token，改怎么做呢？反复尝试而不得。谢谢大家了！
//uptoken_url: '127.0.0.1:8080/examples/upload_token.php'
},
dnd: '#dndArea',
paste: '#uploader',
swf: './SWF/Uploader.swf',
chunked: true, // 开起分片上传
chunkSize: 4 * 1024 * 1024,
server: 'http://up.qiniu.com/',
resize: false, // 不压缩image
// runtimeOrder: 'flash',
duplicate: false, // 是否去重
// 只允许选择图片
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// 配置缩略图
trumb: {
width: 110,
height: 110,
quality: 90, // 图片质量，只有type为`image/jpeg`的时候才有效。
allowMagnify: false,// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
crop: true, // 是否允许裁剪。
// type: 'image/jpeg' // 为空的话则保留原有图片格式，否则强制转换成指定的类型。
},
// 配置图片的压缩选项
compress: {
width: 1800,
height: 1800,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 100,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 3 *1024 * 1024
},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,
fileNumLimit: 100, // 验证文件总数量
fileSizeLimit: 300 * 1024 * 1024, // 300 M 验证文件总大小
fileSingleSizeLimit: 20 * 1024 * 1024 // 20 M 验证单个文件大小
});
// 拖拽时不接受 js, txt 文件。
uploader.on( 'dndAccept', function( items ) {
var denied = false,
len = items.length,
i = 0,
// 修改js类型
unAllowed = 'text/plain;application/javascript ';
for ( ; i < len; i++ ) {
// 如果在列表里面
if ( ~unAllowed.indexOf( items[ i ].type ) ) {
denied = true;
break;
}
}
return !denied;
});
斯洛文尼亚旅游 2017-01-26
- 打赏
- 举报
WebUploader能跨域上传？七牛应该不是你域名吧。。
