云社区 博客 博客详情
云社区 博客 博客详情

Welink React-ui表单组件Uploader

云会议运营喵大人 发表于 2020-02-21 18:45:06 02-21 18:45
云会议运营喵大人 发表于 2020-02-21 18:45:06 2020/02/21
0
0

【摘要】 Uploader上传组件。Uploader UI 提供与WeLink规范一致的视图。 组件提供了两种上传类型、多个上传状态、删除图片的样式。上传类型:单张图片上传、多张图片上传。上传状态:正在等待上传、上传中、上传成功、上传失败。参数说明Uploader名称类型默认值说明filesarray[]图片路径langobject超过最大图片是提示内容,例如{ maxError: maxCount ...

Uploader


上传组件。Uploader UI 提供与WeLink规范一致的视图。 组件提供了两种上传类型、多个上传状态、删除图片的样式。

  • 上传类型:单张图片上传、多张图片上传。

  • 上传状态:正在等待上传、上传中、上传成功、上传失败。

参数说明

Uploader

名称类型默认值说明
filesarray[]图片路径
langobject
超过最大图片是提示内容,例如{ maxError: maxCount => '最多只能上传6张图片' }
maxCountnumber4最大可选择多少图片
onChangefuncundefined选择图片事件
replaceStringfuncundefined异常时事件
titlestring'图片上传'标题

Uploader2

名称类型默认值说明
displaybool[]只展示附件,无上传和删除文件功能
langobject
超过最大图片是提示内容,例如{ maxError: maxCount => '最多只能上传6张图片' }
maxCountnumber4最大可选择多少图片
filesarray[]文件列表,包含 type 文件类型,如 pdf;name 文件名称;size 文件大小,如:1.1M;status 文件进度,如:60%
replaceStringfunc
异常时事件
onChangefunc
选择图片事件
onFileClickfunc
点击查看文件信息事件
onDeleteClickfunc
点击删除文件事件
onUploadfunc
自定义上传事件,如果传了此方法,将覆盖默认上传图片的事件

import React, { Component } from 'react';
import {
  Gallery, GalleryDelete, Uploader, Uploader2, CellsTitle
} from '@wecode/react-weui';
import photoSrc from './photo.png';
import thumbSrc from './thumb.png';class UploaderDemo extends Component {
  maxError = {
    maxError: maxCount => `Max <span>${maxCount} images allow`
  };  constructor(props) {
    super(props);    this.state = {
      gallery: false,
      demoFiles: [
        {
          url: thumbSrc
        },
        {
          url: photoSrc
        },
        {
          url: thumbSrc
        },
        {
          url: photoSrc,
          error: true
        },
        {
          url: thumbSrc,
          status: '50%'
        }
      ],
      demo2Files: [
        {
          type: 'pdf',
          name: '便携工作站1.pdf',
          size: '1.1M'
        },
        {
          type: 'ppt',
          name: '2016年华为全联接大会,现场照....ppt',
          size: '1.1M'
        }
      ],
      demo3Files: [
        {
          type: 'jpg',
          name: '便携工作站1.JPG',
          size: '1.1M',
          status: '100%'
        },
        {
          type: 'pdf',
          name: '2016年华为全联接大会,现场照....PDF',
          size: '1.1M',
          status: '60%'
        }
      ]
    };
  }  getFileName(o) {
    const pos = o.lastIndexOf('/');
    return o.substring(pos + 1);
  }  getFileSuffix(fileName) {
    const index1 = fileName.lastIndexOf('.');
    const index2 = fileName.length;
    const suffix = fileName.substring(index1 + 1, index2);
    return suffix;
  }  renderGallery() {
    const { gallery, demoFiles } = this.state;
    if (!gallery) return false;    const srcs = demoFiles.map(file => file.url);    return (
      <Gallery
        src={srcs}
        show
        defaultIndex={gallery.id}
        onClick={e => {
          // avoid click background item
          e.preventDefault();
          e.stopPropagation();
          this.setState({ gallery: false });
        }}
      >
        <GalleryDelete
          onClick={(e, id) => {
            this.setState({
              demoFiles: demoFiles.filter((e, i) => i !== id),
              gallery: demoFiles.length <= 1
            });
          }}
        />
      </Gallery>
    );
  }  render() {
    const { demoFiles, demo2Files, demo3Files } = this.state;
    return (
      <section>
        {this.renderGallery()}
        <CellsTitle>样例1</CellsTitle>
        <Uploader
          title="上传图片"
          maxCount={6}
          files={demoFiles}
          replaceString={msg => window.HWH5.toast({ msg, type: 'n' })}
          onChange={(file, e) => {
            const newFiles = [...demoFiles, { url: file.data }];
            this.setState({
              demoFiles: newFiles
            });
          }}
          onFileClick={(e, file, i) => {
            console.log('file click', file, i);
            this.setState({
              gallery: {
                url: file.url,
                id: i
              }
            });
          }}
          onDeleteClick={(e, file, i) => {
            this.setState({
              demoFiles: demoFiles.filter((event, idx) => idx !== i),
              gallery: false
            });
          }}
          lang={this.maxError}
        />
        <CellsTitle>样例2</CellsTitle>
        <Uploader2
          display
          title="附件"
          files={demo2Files}
          onFileClick={(e, file, i) => {
            console.log('file click', file, i);
          }}
        />
        <br />
        <Uploader2
          title="附件"
          maxCount={6}
          files={demo3Files}
          replaceString={msg => console.log(msg)}
          // onUpload={e => {
          //     console.log(123);
          // }}
          onChange={(file, e) => {
            const fileName = this.getFileName(file.data);
            const fileSuffix = this.getFileSuffix(fileName);
            const newFiles = [
              ...demo3Files,
              {
                url: file.data,
                type: fileSuffix,
                name: fileName,
                status: '0%'
              }
            ];
            const index = newFiles.length - 1;
            this.setState(
              {
                demo3Files: newFiles
              },
              () => {
                const filePath = file.data;
                console.log('调用上传接口', '---------', filePath, index);
                HWH5.uploadFile({
                  zip: false,
                  serverType: 0,
                  serverUrl:
                    'http://mcloud-uat.huawei.com/mcloud/mag/ProxyForText/imock/mock/upload',
                  filePath,
                  name: 'aufile',
                  timeout: 600000,
                  progress: 1,
                  formData: {
                    aufile: filePath,
                    name: 'aufile',
                    typesLimit: 'json,png',
                    sizeLimit: 100000
                  },
                  onProgress: _data => {
                    const { progress } = JSON.parse(_data);
                    const { demo3Files } = this.state;
                    const currentItem = { ...demo3Files[index] };
                    currentItem.status = progress + '%';
                    console.log(currentItem, '----demo3Files', progress);
                    demo3Files[index] = currentItem;
                    this.setState({
                      demo3Files
                    });
                  }
                })
                  .then(data => {
                    console.log('服务端返回数据:', data);
                  })
                  .catch(error => {
                    console.log('HWH5.uploadFile上传异常', error);
                  });
              }
            );
          }}
          onFileClick={(e, file, i) => {
            console.log('file click', file, i);
          }}
          onDeleteClick={(e, file, i) => {
            console.log(file, '--- file');
            this.setState({
              demo3Files: demo3Files.filter((event, idx) => idx !== i),
              gallery: false
            });
          }}
          lang={this.maxError}
        />
      </section>
    );
  }
}export default UploaderDemo;

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消