React中上传图片到七牛的示例代码


Posted in Javascript onOctober 10, 2017

之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助。

逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作。这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了。

我这里使用了nodejs的库scriptjs,

const $S = require('scriptjs');

可以实现异步的加载文件,当然你也可以使用你认为更好的,当然也别忘记告诉我下。以下为代码实现部分:

async componentDidMount() {

 let uploadToken = await this.getUploadToken();

 $S([
  'https://dn-kdjz.qbox.me/js/plupload/2.1.1/plupload.full.min.js',
  'https://dn-kdjz.qbox.me/js/qiniu-js-sdk/1.0.17.2/qiniu.min.js'
 ], 'uploadBundle');

 $S.ready('uploadBundle', () => {

  // 证件合影
  let options1 = {
   runtimes: 'html5,flash,html4',
   browse_button: 'photoId',
   uptoken: uploadToken,
   get_new_uptoken: false,
   domain: 'https://xxxx.xxxxxx', // bucket域名,下载资源时用到,必需
   container: 'photoIdContainer', // 上传区域DOM ID,默认是browser_button的父元素
   max_file_size: '100mb', // 最大文件体积限制
   flash_swf_url: '/js/plupload/2.2.1/Moxie.swf', //引入flash,相对路径
   max_retries: 3, // 上传失败最大重试次数
   dragdrop: true, // 开启可拖曳上传
   drop_element: 'photoIdContainer', // 拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
   chunk_size: '4mb', // 分块上传时,每块的体积
   auto_start: true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传
   init: {
    'FilesAdded': (up, files) => {
     plupload.each(files, function(file) {
      // 文件添加进队列后,处理相关的事情
     });
    },
    'BeforeUpload': (up, file) => {
     // 每个文件上传前,处理相关的事情
    },
    'UploadProgress': (up, file) => {
     // 每个文件上传时,处理相关的事情
    },
    'FileUploaded': async(up, file, info) => {
     // 查看简单反馈
     let domain = up.getOption('domain');
     let res = JSON.parse(info);
     let sourceLink = await this.getDownloadUrl(res.key);
     this.setState({
      photoIdKey: res.key,
      photoId: sourceLink
     })
    },
    'Error': (up, err, errTip) => {
     //上传出错时,处理相关的事情
     console.log(err);
    },
    'UploadComplete': () => {
     //队列文件处理完毕后,处理相关的事情
     console.log('上传完成');
    },
    'Key': (up, file) => {
     let timestamp = parseInt((new Date().valueOf() / 1000));
     // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
     // 该配置必须要在unique_names: false,save_key: false时才生效
     let key = `idcard/${timestamp}_${file.name}`;
     return key
    }
   }
  };
  // 第一个按钮
  const uploader1 = Qiniu.uploader(options1);
 })
}

这里有个getUploadToken方法,这个方法是根据官方文档的策略实现了一个获取上传token的方法,此方法是通过访问服务端的接口来获取token。具体实现过程可以参考官方。如果大家有任何疑问请给我留言,小编会及时回复大家的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些javascript一些题目的解析
Dec 25 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
基于对象合并功能的实现示例
Oct 10 #Javascript
聊聊Vue.js的template编译的问题
Oct 09 #Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 #Javascript
Angular2监听页面大小变化的解决方法
Oct 09 #Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 #Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 #Javascript
You might like
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP设置进度条的方法
2015/07/08 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
类似框架的js代码
2006/11/09 Javascript
JQuery小知识
2010/10/15 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
法学院毕业生求职信
2014/06/25 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript