Antdupload小結

一、Antdupload的概述

Antdupload是一個基於React框架的上傳組件。它使用了Ant Design的風格，並提供了豐富的上傳功能。在使用Antdupload之前，我們需要先安裝Ant Design和React。

二、Antdupload的使用

1、引入Antdupload和Ant Design樣式

import { Upload } from 'antd';
import 'antd/dist/antd.css';

2、構造上傳組件

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
ReactDOM.render(
  
    
       Click to Upload
    
  ,
  mountNode,
);

3、參數說明：

action: 上傳地址，必選參數
data: 上傳所需數據或上傳函數，可選參數
defaultFileList: 默認已上傳的文件列表。數組中的每個對象均需包含 uid 屬性
directory: 支持上傳文件夾，IE10+ 以及 Edge 瀏覽器不支持該參數
headers: 設置上傳的請求頭部
listType: 上傳列表的內建樣式，支持三種基本樣式 text, picture 和 picture-card
multiple: 是否支持多選文件
name: 發到後台的文件參數名
showUploadList: 顯示已上傳文件列表的樣式

三、Antdupload的新特性

1、Chunk Upload

Antdupload支持大文件上傳，以及將大文件拆分為多個塊同時上傳，從而提高上傳速度和穩定性。這樣做的好處是，如果某一塊上傳失敗，只需要重新上傳該塊即可，不需要重新上傳整個文件。

import { Upload } from 'antd';
import 'antd/dist/antd.css';

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
  data: {
    chunkCount: 4,
  },
  listType: 'picture',
  multiple: true,
};
ReactDOM.render(
  
    
          
    
Click or drag file to this area to upload
    
Support for a single or bulk upload.
  ,
  mountNode,
);

2、Image Preview

Antdupload支持圖片預覽功能，同時支持自定義預覽和刪除操作。

import { Upload, Modal } from 'antd';

import 'antd/dist/antd.css';
const { confirm } = Modal;
function getBase64(file) {
 return new Promise((resolve, reject) => {
 const reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = () => resolve(reader.result);
 reader.onerror = error => reject(error);
 });
}
class PicturesWall extends React.Component {
 state = {
 previewVisible: false,
 previewImage: '',
 fileList: [
 {
 uid: '-1',
 name: 'image.png',
 status: 'done',
 url: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
 },
 ],
 };
 handleCancel = () => this.setState({ previewVisible: false });
 handlePreview = async file => {
 if (!file.url && !file.preview) {
 file.preview = await getBase64(file.originFileObj);
 }
 this.setState({
 previewImage: file.url || file.preview,
 previewVisible: true,
 });
 };
 handleChange = ({ fileList }) => this.setState({ fileList });
 handleRemove = file => {
 confirm({
 title: 'Delete this file?',
 onOk() {
 console.log('OK');
 },
 onCancel() {
 console.log('Cancel');
 },
 });
 };
 render() {
 const { previewVisible, previewImage, fileList } = this.state;
 const uploadButton = (
 Upload
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/244338.html