七牛云存储---JavaScript SDK 简单上传，走过的几个坑

or0fun 发布于2019-08-20 15:19 / 3284人阅读

摘要：和七牛账号里面提供。自己设定的七牛云存储空间名，创建存储空间的时候注意地区应该默认是华东，不一样地区需要修改下里面指定的上传的域名，请去参考官方文档。若开启该选项，为自动生成上传成功后的文件名。

先放上几个用到的七牛官方网站：

JavaScript SDK地址
需要在页面中先引入 plupload 提供的 plupload.full.min.js（生产环境）
然后再引入SDK里的 qiniu.min.js（生产环境）

在线生成uptoken地址
uptoken上传需要用到，正式项目一般由后台生成，这里我们做测试，用自己的ak、sk、bucketName去官方生成一个（有时效性）。
AK和SK：七牛账号里面提供。
bucketName：自己设定的七牛云存储空间名，创建存储空间的时候注意地区(应该默认是华东)，不一样地区需要修改下qiniu.min.js里面指定的上传的域名，请去参考官方文档。
其它：可选的都可不填。

检测uptoken是否可用地址(能否成功上传)地址
token：上面生成的自己的token。
key：可以不填。
关于测试生成的token是否可用，也可以参考这个网站提供的demo，按他的说明修改demo里面的两个值就可以判断自己的token是否可用，并且有反馈，根据反馈的erro参考官方文档。

关键代码 html

这里要用button标签，然后id和js方法中Qiniu.uploader的browse_button绑定。
这里用input标签type="file"不行！

 //引入Plupload 、qiniu.js后
  var uploader = Qiniu.uploader({
      runtimes: "html5,flash,html4",    //上传模式,依次退化
      browse_button: "pickfiles",       //上传选择的点选按钮，**必需**
      uptoken: "myToken",
      //uptoken_url: "/token",            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
      // uptoken: "", //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
      // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
      // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
      domain: "myUrl",   //bucket 域名，下载资源时用到，**必需**
      get_new_uptoken: false,            //设置上传文件的时候是否每次都重新获取新的token
      container: "container",                //上传区域DOM ID，默认是browser_button的父元素，
      max_file_size: "100mb",           //最大文件体积限制
      flash_swf_url: "Moxie.swf",       //引入flash,相对路径
      max_retries: 3,                   //上传失败最大重试次数
      dragdrop: true,                   //开启可拖曳上传
      drop_element: "container",        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
      chunk_size: "4mb",                //分块上传时，每片的体积
      auto_start: true,                //选择文件后自动上传，若关闭需要自己绑定事件触发上传
      init: {
          "FilesAdded": function(up, files) {
              plupload.each(files, function(file) {
                  // 文件添加进队列后,处理相关的事情
                  console.log(file.name);
              });
          },
          "BeforeUpload": function(up, file) {
                 // 每个文件上传前,处理相关的事情
          },
          "UploadProgress": function(up, file) {
                 // 每个文件上传时,处理相关的事情
          },
          "FileUploaded": function(up, file, info) {
                 // 每个文件上传成功后,处理相关的事情
                 // 其中 info 是文件上传成功后，服务端返回的json，形式如
                 // {
                 //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                 //    "key": "gogopher.jpg"
                 //  }
                 // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                 // var domain = up.getOption("domain");
                 // var res = parseJSON(info);
                 // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
          },
          "Error": function(up, err, errTip) {
                 //上传出错时,处理相关的事情
          },
          "UploadComplete": function() {
                 //队列文件处理完毕后,处理相关的事情
          },
          "Key": function(up, file) {
                 // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                 // 该配置必须要在 unique_names: false , save_key: false 时才生效
                 var key = "";
                 // do something with key here
                 return key
          }
      }
  });

  // domain 为七牛空间（bucket)对应的域名，选择某个空间后可以看到
  // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs

document.getElementById("pickfiles").onclick = function() {
  uploader.start();
};

超融合服务器专线服务七牛云存储图片上传七牛云存储七牛云存储教程七牛云存储服务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82158.html

用纯Javascript实现React Native的文件上传

摘要：是上传到服务器的文件名，是请求令牌。七牛云将持续发布服务于企业的云服务，也会在第一时间发布平台的，让使用的小伙伴在第一时间集成七牛云的最新服务。 React Native 是最近两年最值得花时间跟进的移动开发技术，这个项目始于2013年Facebook内部的一个黑客马拉松项目，在2014年7月之前这个项目都偏向于实验性质，直到广告管理团队想要构建一个独立的iOS应用，然而这个团队并没有...

JasonZhang 2019-08-19 18:12 评论0 收藏0
关于七牛云正确使用姿势探索

摘要：，在后续测试时遇到一个诡异，当文件过大时，任务脚本上传到七牛云失败。当我遇到大文件无法上传到七牛云时，断点调试到这里，发现返回的是。后来还真被我找到了，七牛云官方提供一个脚本工具。业务场景需求我们项目有一个文件上传需求，需要从客户端上传到七牛云的对象存储和自己的应用服务器上。这里使用七牛云主要是实现下载分发。应用服务器需要留一份是因为后续需要做文件分析（并且是上传后需要立马分析出...

3fuyu 2019-07-01 12:39 评论0 收藏0
使用七牛云存储的一些经验总结

摘要：原文使用七牛云存储的一些经验总结错误处理如果在与七牛的交互中出现状态码为的错误，一句话，不要犹豫，直接联系七牛技术支持。但是笔者发现，在使用七牛云转化后的视频，这样做是无效的。近段时间将使用七牛云存储来存放用户上传的数据，客户端通过七牛的js-sdk与七牛交互，服务端C#实现了七牛相关的接口。在这过程中多多少少遇到点问题，在这里总结一下。原文：使用七牛云存储的一些经验总结 599错...

Lyux 2019-08-21 12:23 评论0 收藏0
记录一下前端分片上传七牛云踩过的坑

摘要：后来查阅了资料后自己手动实现了文件切片上传到服务器基本需求已经实现，但由于效率及稳定性问题后来决定还是直传文件到七牛云。总结起来七牛云上传的套路就是后台为你提供或者获取的接口地址之后上传的时候要带上这个。起因最近在工作中有个上传大文件的需求，原先咨询过组里的大佬给我推荐了百度的webupload，但后来引入之后发现它是基于jquery封装的。由于本身项目是基于vue开发的所以与j...

ISherry 2019-08-21 11:51 评论0 收藏0
更好用的七牛云存储 JS SDK，因为官方的太难用

摘要：目前可能是七牛浏览器文件上传的最好实现。任务拦截器拦截任务返回，任务将会从任务队列中剔除，不会被上传中断任务，返回，任务队列将会在这里中断，不会执行上传操作。请上传小于的文件你可以添加多个任务拦截器选择上传文件确定后该生命周期函数会被回调。 qiniu4js qiniu4js目前可能是七牛JavaScript浏览器文件上传的最好实现。使用TypeScript编写，不依赖任何三方库，纯...

iKcamp 2019-08-22 10:39 评论0 收藏0