Element-React Upload 上傳

通過(guò)點(diǎn)擊或者拖拽上傳文件

點(diǎn)擊上傳

通過(guò) tip屬性 你可以傳入自定義的上傳按鈕類型和文字提示。

render() {
  const fileList = [
    {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}
  ];
  return (
    <Upload
      className="upload-demo"
      action="http://jsonplaceholder.typicode.com/posts/"
      onPreview={file => this.handlePreview(file)}
      onRemove={(file, fileList) => this.handleRemove(file, fileList)}
      fileList={fileList}
      limit={3}
      onExceed={(files, fileList) => {
        Message.warning(`當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
      }}
      tip={<div className="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>}
    >
      <Button size="small" type="primary">點(diǎn)擊上傳</Button>
    </Upload>
  )
}


handlePreview(file) {
  console.log('preview');
}


handleRemove(file, fileList) {
  console.log('remove');
}

用戶頭像上傳

使用 beforeUpload 限制用戶上傳的圖片格式和大小。

constructor(props) {
  super(props);


  this.state = {
    imageUrl: '',
  };
}


render() {
  const { imageUrl } = this.state;
  return (
    <Upload
      className="avatar-uploader"
      action="http://jsonplaceholder.typicode.com/posts/"
      showFileList={false}
      onSuccess={(res, file) => this.handleAvatarScucess(res, file)}
      beforeUpload={file => this.beforeAvatarUpload(file)}
    >
      { imageUrl ? <img src={imageUrl} className="avatar" /> : <i className="el-icon-plus avatar-uploader-icon"></i> }
    </Upload>
  )
}


handleAvatarScucess(res, file) {
  this.setState({ imageUrl: URL.createObjectURL(file.raw) });
}


beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;


  if (!isJPG) {
    Message('上傳頭像圖片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    Message('上傳頭像圖片大小不能超過(guò) 2MB!');
  }
  return isJPG && isLt2M;
}

照片墻

使用 listType 屬性來(lái)設(shè)置文件列表的樣式。

constructor(props) {
  super(props);


  this.state = {
    dialogImageUrl: '',
    dialogVisible: false,
  };
}


render() {
  const { dialogImageUrl, dialogVisible } = this.state;
  return (
    <div>
      <Upload
        action="http://jsonplaceholder.typicode.com/posts/"
        listType="picture-card"
        onPreview={file => this.handlePictureCardPreview(file)}
        onRemove={(file, fileList) => this.handleRemove(file, fileList)}
      >
        <i className="el-icon-plus"></i>
      </Upload>
      <Dialog
        visible={dialogVisible}
        size="tiny"
        onCancel={() => this.setState({ dialogVisible: false })}
      >
        <img width="100%" src={dialogImageUrl} alt="" />
      </Dialog>
    </div>
  )
}


handleRemove(file, fileList) {
  console.log(file, fileList);
}


handlePictureCardPreview(file) {
  this.setState({
    dialogImageUrl: file.url,
    dialogVisible: true,
  })
}

圖片列表縮略圖

render() {
  const fileList2 = [
    {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}
  ]
  return (
    <Upload
      className="upload-demo"
      action="http://jsonplaceholder.typicode.com/posts/"
      onPreview={file => this.handlePreview(file)}
      onRemove={(file, fileList) => this.handleRemove(file, fileList)}
      fileList={fileList2}
      listType="picture"
      tip={<div className="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>}
    >
      <Button size="small" type="primary">點(diǎn)擊上傳</Button>
    </Upload>
  )
}


handleRemove(file, fileList) {
  console.log(file, fileList);
}


handlePreview(file) {
  console.log(file);
}

上傳文件列表控制

通過(guò) onChange 鉤子函數(shù)來(lái)對(duì)列表進(jìn)行控制

constructor(props) {
  super(props);


  this.state = {
    fileList: [{
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
      status: 'finished'
    }, {
      name: 'food2.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
      status: 'finished'
    }]
  };
}


render() {
  const { fileList } = this.state;
  return (
    <Upload
      className="upload-demo"
      action="http://jsonplaceholder.typicode.com/posts/"
      onChange={(file, fileList) => this.handleChange(file, fileList)}
      fileList={fileList}
      tip={<div className="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>}
    >
      <Button size="small" type="primary">點(diǎn)擊上傳</Button>
    </Upload>
  )
}


handleChange(file, fileList) {
  this.setState({ fileList: fileList.slice(-3) });
}

拖拽上傳

可將文件拖入指定區(qū)域進(jìn)行上傳。

通過(guò) drag 屬性可以將上傳控件變?yōu)橹С滞献У男问?，并且你可以通過(guò) multiple 屬性來(lái)控制是否支持多選，onPreview 和 onRemove 是一個(gè)鉤子函數(shù)，分別在點(diǎn)擊上傳后的文件鏈接和點(diǎn)擊移除上傳后的文件后被調(diào)用。

render() {
  return (
    <Upload
      className="upload-demo"
      drag
      action="http://jsonplaceholder.typicode.com/posts/"
      multiple
      tip={<div className="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>}
    >
      <i className="el-icon-upload"></i>
      <div className="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
    </Upload>
  )
}

手動(dòng)上傳

render() {
  const fileList = [
    {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}
  ];
  return (
    <Upload
      className="upload-demo"
      ref="upload"
      action="http://jsonplaceholder.typicode.com/posts/"
      onPreview={file => this.handlePreview(file)}
      onRemove={(file, fileList) => this.handleRemove(file, fileList)}
      fileList={fileList}
      autoUpload={false}
      tip={<div className="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>}
      trigger={<Button size="small" type="primary">選取文件</Button>}
    >
      <Button style={{ marginLeft: '10px'}} size="small" type="success" onClick={() => this.submitUpload()}>上傳到服務(wù)器</Button>
    </Upload>
  )
}


handleRemove(file, fileList) {
  console.log(file, fileList);
}


handlePreview(file) {
  console.log(file);
}


submitUpload() {
  this.refs.upload.submit();
}

Upload Attribute

Methods