立树
立树
  • 发布:2017-12-22 17:59
  • 更新:2020-09-27 10:42
  • 阅读:5265

使用 uploader 进行七牛图片上传

分类:HTML5+

.

说明

我是七牛的忠实拥趸。
个人网站、公司项目,文件和图片的存储方案使用的都是七牛。
这两天在封装 DC 的七牛图片上传,遇到了点问题,不过最后还是解决了。
这里只分享下简单的思路和代码。
.

开发思路

  1. 生成七牛上传令牌
    因为有安全隐患,七牛官方推荐开发者向自己的业务服务器发送 ajax 进行获取。
    我在贴出的代码中略过了这一步,你们自己处理。
    .
  2. 选取图片
    使用摄像头(plus.camera)或者相册(plus.gallery)都可以。
    .
  3. 上传图片
    最主要就是设置 “令牌”、“图片名称” 等参数。
    不过需要的注意就是添加文件(addFile)后面一定要加 {"key":"file"},这是固定值,不要改,别问我为什么。

.

// 从相册获取图片  
plus.gallery.pick(function(ret){  

    // 获取图片名称  
    var path = ret;  
    var file = ret.substr(ret.lastIndexOf("/")+1);  
    var token = "xxxxxxx";    // 填写你的七牛上传令牌  

    // 上传图片  
    var url = "http://upload.qiniu.com/";  
    var uploader = plus.uploader.createUpload(url,{},function(up,state){  
        if( state==200 )  
            Console("上传成功");  
        else  
            Console("上传失败 - ",state);  
    });  

    uploader.addData("key",file);  
    uploader.addData("token",token);  
    uploader.addFile(path,{"key":"file"});      // 固定值,千万不要改!!!!!!  
    uploader.start();  

});
2 关注 分享
高司令 8***@qq.com

要回复文章请先登录注册

立树

立树 (作者)

回复 2***@qq.com :
我上面步骤写的很清楚了,你按照流程来,首先 ajax 去请求你们后台给的令牌接口,成功获取后,在 ajax 的成功回调函数里面粘贴我上面的代码就行了。
2020-09-27 10:42
勒布朗

勒布朗

感谢大佬 {"key":"file"}这个用固定值确实能上传了 折腾了一下午。。。
2020-01-15 20:21
2***@qq.com

2***@qq.com

七牛云上传的令牌是怎么拿到的呀
2019-11-07 15:50
高司令

高司令

厉害(ง •̀_•́)ง
2018-03-23 22:09
freedemon

freedemon

楼主大才!!!昨晚折腾了两个小时上传又拍云不成功,原来是因为"key":"file"}是固定值,我更改导致上传失败!
2018-02-27 09:10
立树

立树 (作者)

回复 a***@qq.com :
你也没贴代码,所以我也不知道你具体是怎么写的,只能根据可能的情况说一下了。
1. 你先去七牛云上面看看你这个文件是否正常,用浏览器打开地址看看能不能正常显示。
2. 重新上传,在选择文件后,打印文件信息(路径,看看有没有文件名之类的)
你先试试吧,开发这么久,从没遇到过你这种情况。
2018-01-31 17:20
a***@qq.com

a***@qq.com

为什么我上传上去 没有文件名 ,文件类型是 text/html,求指教
2018-01-31 14:27
立树

立树 (作者)

回复 回梦無痕 :
bingo
2017-12-22 18:26
回梦無痕

回梦無痕

那么多个叹号。。我在想,你说的遇到了点问题,是不是被那个参数坑了。。
2017-12-22 18:11