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

之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用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。具体实现过程可以参考官方。如果大家有任何疑问请给我留言,小编会及时回复大家的。

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

(0)

相关推荐

  • 基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • react实现一个优雅的图片占位模块组件详解

    前言 发现项目中的图片占位模块写得很不优雅,找了一圈,发现没找到自己想要的图片组件.于是自己写了一个,写了一个还算优雅的图片组件:mult-transition-image-view 截图: 功能简介 首先它是一个比较优雅的组件:用起来不头疼. 第二个它能实现以下场景: 没有图片的时候,显示一个占位图(可以直接用css来写背景,方便自定义) 希望在加载大图的时候,能先占位一张小图,然后再过渡到一张大图.类似上面的截图. 使用方法 安装npm 包 npm install react-mult-tr

  • React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

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

    之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助. 逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作.这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了. 我这里使用了nodejs的库scriptjs, const $S = require('scriptjs'); 可以实现异步

  • vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

  • Laravel中前端js上传图片到七牛云的示例代码

    以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例. 1. 首先引入相应的js文件,下面是通过CDN引入的StaticfileCDN,当然也有其他很多方式下载, bower,git,官网的SDK 七牛js基于Plupload插件封装,所以需要下载Plupload,建议使用 2.1.1 ~ 2.1.9. <script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></

  • Laravel框架实现的上传图片到七牛功能详解

    本文实例讲述了Laravel框架实现的上传图片到七牛功能.分享给大家供大家参考,具体如下: 新建项目 这里直接用一个新的Laravel5.3的项目进行演示,其他版本都是一样不会影响功能,顶多是路由位置不一样而已.已有项目的小伙伴可直接跳过次段. # 新建项目 laravel new laravel-qiniu cd laravel-qiniu 安装Laravel七牛扩展包 过Composer安装: composer require zgldh/qiniu-laravel-storage 然后在

  • 微信小程序批量上传图片到七牛(推荐)

    一.引入七牛SDK 具体查看文档 https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md 二.封装上传方法upload.js /** * 上传函数 */ const qiniuUploader = require("qiniuUploader"); const request = require("./request.js") // 初始化七牛相关参数 function initQiniu() {

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • react+zarm实现底部导航栏的示例代码

    目录 需要实现的效果 实现过程 1.使用 prop-types 库进行类型检查 2.使用 useNavigate 3.编写标签栏组件 4.使用标签栏组件 5.添加对应的页面路由 6.效果 参考资料 需要实现的效果 需要实现下面栏目固定,并且点击时切换到不同页面路由 实现过程 1.使用 prop-types 库进行类型检查 注意:自 React v15.5 起,React.PropTypes 已移入另一个包中.请使用 prop-types 库 代替. PropTypes 提供了使用不同验证器的例子

  • C++中const用于函数重载的示例代码

    常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分,在实现部分也要带该关键字. (2)const关键字可以用于对重载函数的区分. (3)常成员函数不能更新类的成员变量,也不能调用该类中没有用const修饰的成员函数,只能调用常成员函数. (4)非常量对象也可以调用常成员函数,但是如果有重载的非常成员函数则会调用非常成员函数. 重载看例子: #include<iostream> u

  • Android中js和原生交互的示例代码

    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

随机推荐