首页 > 代码库 > ant design框架学习

ant design框架学习

2024-09-15 19:55:45   218人阅读

1、Input 上传文件：

①限制上传文件的格式：

accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "
如果是多种格式，中间用","隔开
②上传文件：
<input type=‘file‘ id=‘file‘ name=‘myfile‘ accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "/>
 <div className="btn-addall">
      <input type=‘button‘className="saveAll" onClick={this.uploadFile.bind(this)} value=http://www.mamicode.com/‘上传‘ />
      <input type=‘button‘className="cancelAll" onClick={this.closeModal.bind(this)} value=http://www.mamicode.com/‘取消‘ />
</div>
    uploadFile() {
        const token = sessionStorage.getItem(‘token‘);
        const dbId = this.props.id;
        var fileObj = document.getElementById(‘file‘).files[0]; // 获取文件对象
        var FileController = ‘http://192.168.1.188:5000/api/user/commoditiesUpload‘; // 接收上传文件的后台地址
        // FormData 对象
        var form = new FormData();
        form.append(‘file‘, fileObj); // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open(‘post‘, FileController, true);
        xhr.setRequestHeader("token",token);
        xhr.setRequestHeader("dbId",dbId);
        xhr.onload = function () {
            
        };
        xhr.send(form);
        this.props.closeModal(false);
        hashHistory.push(‘warehouse‘);
    }
2、上传图片
<Upload
        {...props}                        
         onPreview={this.handlePreview.bind(this)}
         onChange={this.handleChange.bind(this)}
         onRemove={this.handleRemoveImage}
  >
     {fileList.length >= 5 ? null : uploadButton}
 </Upload>
const {
            previewVisible,
            previewImage,
            fileList
        } = this.state;
        const uploadButton = (
            <div>
         添加图片
     </div>
        );
        const token = sessionStorage.getItem(‘token‘);
        const dbId = this.props.dbId;
        const props = {
            showUploadList:true,
            action:‘http://192.168.31.134:5000/api/uploadImg‘,
            headers:{
                "token":token
            },
            defaultFileList: [...fileList],
            listType: "picture-card",
        };
handleCancel() {
        this.setState({
            previewVisible: false
        })
    }
    handlePreview(file) {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange({
        fileList
    }) {
        this.setState({
            fileList
        });
    }
    handleRemoveImage(file){
        console.log(‘删除图片的id‘,file.response.data);
    }
3、模块化固然好，但是不要嵌套嵌太深了
4、循环输出输入框：
   const list = this.props.dataList.length ?
            this.props.dataList.map((listItem, index) => (
                <Col span={7} key={index} >
                    <Row type="flex" justify="start" className="robot-col">
                        <Col span={5} className="property">{listItem}：</Col>
                        <Col span={14} className="property">
                            <Input id={‘properties‘ + index}/>
                        </Col>
                    </Row>
                </Col>
            )) : ‘您当前只有默认属性，没有其他属性，赶紧去添加吧~‘;
5、直接点击跳转页面：
<a className="property-a" href="http://www.mamicode.com/#warehouse/addProducts">添加商品</a>
<Link to="#warehouse/addProduct"  activeClassName="active">Bob With Query Params</Link>
6、点击按钮之后跳转：
import { hashHistory } from ‘react-router‘;
hashHistory.push(‘warehouse/displayProducts:‘ + id);

ant design框架学习


联系
我们