七牛图片上传的使用心得

我写了一篇有关七牛的教程：http://blog.csdn.net/shuzipai/article/details/74573953

我使用七牛是因为我懒得管理图片，也懒得处理图片缩放之类的东西。

最主要的，感觉用七牛逼格比较高。

傻瓜式的顺序：注册七牛账号->实名认证->充值10块钱->开始使用

这时候你去个人中心->密钥管理，可以看到AK和SK两个值，这两个值是七牛确认是谁在上传图片，也就是确认身份用的，所以千万不要给心怀不轨的人看到。

图片上传应该都需要以下几件事：

1.用户选择想要上传的图片

2.预览图片

3.上传图片

4.提交表单

5.后台确认表单提交成功，将已上传的图片标记为永存。

上传图片是指把图片上传到七牛，提交表单是把图片地址保存到数据库，这样可以给自己的网站省很大一部分带宽

可能是我没有深入的了解七牛上传图片的机制，我发现七牛并不能先暂时缓存图片，然后提交表单以后再确认保存。

因此我自己用了一个笨方法，创建两个空间，一个空间用来缓存，另一个空间用做真正的保存。

具体的步骤是：

1.用户选择图片

2.预览图片

3.用户点击提交表单

4.上传图片（把图片上传到缓存空间，并标记缓存一天）

5.上传成功后提交表单

6.后台将缓存中的图片复制一份到真正的空间中，复制成功后删除缓存图片（不用管是否删除成功，大不了缓存一天）

根据步骤，一点一点来，完成前三步需要后端提供一个七牛生成的token，还有前端的plupload方法

首先是后台如何生成七牛token？

我不告诉你，自己去看文档吧，我觉得这个很简单，但是记住了，给前端生成的token要标注缓存1天，也就是24小时以后要删除。

然后是前端的代码

你去看看七牛对javascript的文档，然后我给你一个函数，看不懂留言

/*设置Qiniu.uploader对象参数*/
function setOption(parent, button, last, token){return {runtimes: 'html5,flash,html4',    //上传模式,依次退化container: parent,           //上传区域DOM ID，默认是browser_button的父元素，drop_element: parent,        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传browse_button: button,       //上传选择的点选按钮，**必需**uptoken_url: '/web/qiniu/getsdk',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）uptoken : token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理domain: 'http://ofc0yhzbv.bkt.clouddn.com/',   //bucket 域名，下载资源时用到，**必需**get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的tokenmax_file_size: '10mb',           //最大文件体积限制flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相 对路径max_retries: 3,                   //上传失败最大重试次数dragdrop: true,                   //开启可拖曳上传chunk_size: '10mb',                //分块上传时，每片的体积auto_start: false,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传unique_names: true,      //设置所有文件名唯一filters: {mime_types : [ //只允许上传图片{ title : "Image files", extensions : "jpg,jpeg,gif,png" },],prevent_duplicates : false //不允许选取重复文件},deleteAfterDays:'',init: {'FilesAdded': function(up, files) {// 设置预览图地址var img = new o.Image();img.onload = function (){$("#" + button).attr('src', this.getAsDataURL());}img.load(files[0].getSource());// 开始上传按钮$("#" + button + "_start").click(function(){ up.start(); });plupload.each(files, function(file) {// 如果上传文件大于1 ps：第一个文件上传的时候用户选择第二个文件// 这时队列大于1，队列的第一个文件是正在上传的，第二个是新选的if (up.files.length > 1) {// 移除当前队列里第一个文件up.removeFile(up.files[0]);}// 全局变量 根据变量控制不让表单提前提交imgloading = true;// 文件添加进队列后,处理相关的事情});},'BeforeUpload': function(up, file) {// 每个文件上传前,处理相关的事情$("#" + button + "_uploading").click(function () {up.stop();$("#" + button + "_uploading").fadeOut();});},'UploadProgress': function(up, file) {if($("#" + button + "_uploading").length < 1){return;}$("#" + button + "_uploading").show();$("#" + button + "_uploading").html(up.total.percent + "%（点击取消）");// 每个文件上传时,处理相关的事情},'FileUploaded': function(up, file, info) {var domain = up.getOption('domain');var res = $.parseJSON(info);var sourceLink = domain + res.key; //获取上传成功后的文件的Url// 设置图片名称$("#" + button + "_input").val(res.key);// 进度更新为上传完成$("#" + button + "_uploading").html("上传完成");$("#" + button + "_uploading").unbind();// 图片上传后执行事件// eval(last+"()");last();},'Error': function(up, err, errTip) {alert("目前只支持图片格式：jpg,jpeg,gif,png");//上传出错时,处理相关的事情},'UploadComplete': function() {//队列文件处理完毕后,处理相关的事情},}};
}

通过这个函数，可以点击图片选择图片，然后预览，上传，上传成功后提交表单

提交表单以后，事情就简单多了，后台转存图片，然后删除缓存图片，bingo。

图片上传就搞定了，如果大家想做异步上传，也可以，不过如果做异步上传的话。。。是会有问题的，具体什么问题，有心人可以来问我。

七牛图片上传的使用心得相关推荐

七牛图片上传的使用心得[PHP篇]
曾写过一篇文章随便写了写我怎么用七牛的,发现很多小伙伴来问我,这回写个详细的. 前提: 1.已经有七牛账号,创建了空间,能看到AccessKey/SecretKey: 2.你知道怎么用composer ...
ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
android 队列上传图片,话说android端七牛图片上传
七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创 ...
话说android端七牛图片上传
七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创 ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
七牛云图片上传覆盖
php使用七牛云上传图片,覆盖云上已有文件: 使用七牛云存储提供的PHP SDK,可以非常方便的将本地文件上传到七牛,但默认情况下,上传的文件不会覆盖旧文件,也就是说,之前上传了一个名为photo.j ...
计划用php写一个七牛文件上传小工具
为什么80%的码农都做不了架构师?>>> 功能输入框中填入:bucket Access Key 和 Secret Key 点击提交后,向七牛服务器认证,若认证通过,则在当 ...
php七牛分片上传_七牛视频切片方案 - 张小超fly的个人空间 - OSCHINA - 中文开源技术交流社区...
使用七牛 sdk 上传视频并做分片操作. step1 生成 token const qiniu = require("qiniu"); var accessKey = proc.e ...
tp框架文件上传七牛服务器,TP5开发 - 七牛云图片上传方法
1.config.php配置文件里配置七牛云密钥等里面 secretKey accessKey domain bucket对应换成自己七牛云申请的, 步骤: (1)七牛云注册成功后-对象存储申请10 ...

七牛图片上传的使用心得

七牛图片上传的使用心得相关推荐

最新文章

热门文章