Uploader

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

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

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

参数说明

Uploader

Uploader2

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;