react-images-uploader, React.js 组件用于将图像上载到服务器

分享于 

7分钟阅读

GitHub

  繁體 雙語
React.js component for uploading images to the server
  • 源代码名称:react-images-uploader
  • 源代码网址:http://www.github.com/aleksei0807/react-images-uploader
  • react-images-uploader源代码文档
  • react-images-uploader源代码下载
  • Git URL:
    git://www.github.com/aleksei0807/react-images-uploader.git
    Git Clone代码到本地:
    git clone http://www.github.com/aleksei0807/react-images-uploader
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/aleksei0807/react-images-uploader
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    图像上传器

    NPM

    React.js 组件用于将图像上载到服务器

    Demo

    示例

    多个图像的示例:

    importReact, { Component } from'react';importImagesUploaderfrom'react-images-uploader';import'react-images-uploader/styles.css';import'react-images-uploader/font.css';exportdefaultclassMyUploaderextendsComponent {
     render() {
     return (
     <ImagesUploader
     url="http://localhost:9090/multiple" optimisticPreviews
     onLoadEnd={(err) => {
     if (err) {
     console.error(err);
     }
     }}
     label="Upload multiple images"/> );
     }
    }

    图片的示例:

    importReact, { Component } from'react';importImagesUploaderfrom'react-images-uploader';import'react-images-uploader/styles.css';import'react-images-uploader/font.css';exportdefaultclassMyUploaderextendsComponent {
     render() {
     return (
     <ImagesUploader
     url="http://localhost:9090/notmultiple" optimisticPreviews
     multiple={false}
     onLoadEnd={(err) => {
     if (err) {
     console.error(err);
     }
     }}
     label="Upload a picture"/> );
     }
    }

    示例服务器( node.js,Express )

    你需要从npm安装cors-prefetch-middleware和 images-upload-middleware。

    importexpressfrom'express';importcorsPrefetchfrom'cors-prefetch-middleware';importimagesUploadfrom'images-upload-middleware';constapp=express();app.use('/static', express.static('./server/static'));app.use(corsPrefetch);app.post('/multiple', imagesUpload(
     './server/static/multipleFiles',
     'http://localhost:9090/static/multipleFiles',
     true));app.post('/notmultiple', imagesUpload(
     './server/static/files',
     'http://localhost:9090/static/files'));app.listen(9090, () => {
     console.log('Listen: 9090');
    });

    其他服务器

    道具

    • url: string - 服务器 url ;

    • classNamespace: string - namespace for all classNames ( default: 'iu-' ) ;

    • inputId: string - 隐藏输入类型文件的标识和名称。 用于标签( default:'filesInput' ) 中的htmlFor ;

    • label: string - 标签文本;

    • images: Array - 对已经上载图像的引用的array ;

    • disabled: boolean

    • onLoadStart: function() - 回调,在下载开始时调用;

    • onLoadEnd: function(error: { message: string,.. . }, response?: JSON)

      错误消息:

      • invalid response type - 附加参数:响应,文件名( imagesUploader ) ;
      • server error - 附加参数:状态( 响应状态),文件名( imagesUploader ) ;
      • exceeded the number - 如果有 max 属性和文件计数> max ;
      • file type error - 附加参数:类型( 文件类型),文件名( imagesUploader ) ;
    • deleteImage: function(key: number) - 在从列表中删除图像时调用的回调;

    • clickImage: function(key: number) - 在单击图像预览时调用的回调;

    • optimisticPreviews: boolean - 启用乐观预览 default: false

    • multiple: boolean - 允许上传一组图像 ! default: true

    • image: string - 这里属性仅在以下情况下有效: false 已经加载图片; !

    • notification: string - 这里属性仅适用于多个: false 通知文本; !

    • max: number - 单个上传的最大图片数;

    • color: string - 文本和 svg default:'#142434'的颜色;

    • disabledColor: string - 禁用模式 default:'#bec3c7' 中文本和svg的颜色;

    • borderColor: string - 边框颜色 default:'#a9bac8'

    • disabledBorderColor: string - 禁用模式 default:'#bec3c7' 中的边框颜色;

    • notificationBgColor: string - 通知的background 颜色 default: 'rgba(0, 0, 0, 0.3)' ;

    • notificationColor: string - 通知 default:'#fafafa'的文本和svg颜色;

    • deleteElement: string|element - 用于删除图像的元素;

    • plusElement: string|element - 用于添加图像的元素;

    
    classNames: {
    
    
     container: string,
    
    
     label: string,
    
    
     deletePreview: string,
    
    
     loadContainer: string,
    
    
     dropzone: string,
    
    
     pseudobutton: string,
    
    
     pseudobuttonContent: string,
    
    
     imgPreview: string,
    
    
     fileInput: string,
    
    
     emptyPreview: string,
    
    
     filesInputContainer: string,
    
    
     notification: string,
    
    
    }
    
    
    
    
    
    styles: {
    
    
     container: Object,
    
    
     label: Object,
    
    
     deletePreview: Object,
    
    
     loadContainer: Object,
    
    
     dropzone: Object,
    
    
     pseudobutton: Object,
    
    
     pseudobuttonContent: Object,
    
    
     imgPreview: Object,
    
    
     fileInput: Object,
    
    
     emptyPreview: Object,
    
    
     filesInputContainer: Object,
    
    
     notification: Object,
    
    
    }
    
    
    
    

    COM  Server  图像  react  component  images  
    相关文章