antd upload实例和一些解决问题的办法

Love The Way You Lie 2022-12-28 08:26 30阅读 0赞

1、实现beforeUpload虽然返回false，但是仍然出现省略图

handleBeforeUpload = (file) => {
        let files = [];
        files = this.state.files;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          file.thumbUrl = e.target.result;
          files.push(file);
          this.setState({ fileList: files });
          // this.onChange(files);
        };
        return false;
      };

2、实现如何关闭upload鼠标上移时显示的阴影层

在Upload标签中添加如下代码

showUploadList={
       { showRemoveIcon: false, showPreviewIcon: false }} //隐藏删除按钮

然后在样式中设置鼠标移动上去时的背景颜色为透明

.editBan_upload_box
      .ant-upload-list-picture-card
      .ant-upload-list-item-info::before {
      background-color: rgba(0, 0, 0, 0);
    }

3、完整代码

import React, { Component } from "react";
    import { Input, Button, Upload, message, Tabs } from "antd";
    import { PlusSquareOutlined } from "@ant-design/icons";
    import { replaceBannerList } from "../action/getImg";
    import { connect } from "react-redux";
    const { TabPane } = Tabs;
    class UploadBox extends Component {
      constructor(props) {
        super(props);
        this.state = {
          fileList: [],
          files: [],
          visible: false,
          formData: {},
        };
        this.onChange = this.onChange.bind(this);
      }
      onChange(event) {
        debugger;
        console.log("event", event);
        console.log("this.props.bannerList", this.props.bannerList);
        let formData = new Object();
        formData.originFileObj = event;
        formData.id = this.props.bannerList[0].id;
        formData.imageIndex = this.props.bannerList.imageIndex;
        this.setState({ formData: formData });
      }
      handleBeforeUpload = (file) => {
        let files = [];
        files = this.state.files;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          file.thumbUrl = e.target.result;
          files.push(file);
          this.setState({ fileList: files });
          // this.onChange(files);
        };
        return false;
      };
      render() {
        return (
          <Upload
            action="此处应该填写上传的接口链接"
            data={this.state.formData}
            listType="picture-card"
            fileList={this.state.fileList}
            className="avatar-uploader orgCover"
            beforeUpload={this.handleBeforeUpload}
            showUploadList={
       { showRemoveIcon: false, showPreviewIcon: false }} //隐藏删除按钮
          >
            {this.state.fileList.length === 0 && (
              <div>
                <PlusSquareOutlined />
                <div className="ant-upload-text">选择图片</div>
              </div>
            )}
          </Upload>
        );
      }
    }
    export default UploadBox

4、不显示上传列表

showUploadList: false,

![20201221185550234.png][]

5.一个实例

import React from "react"
    import { Form, Input, Select, DatePicker, Upload, Icon, message } from "antd"
    import { inject, observer } from "mobx-react";
    import moment from "moment"
    import config from '../../../../config'
    import { connect } from "react-redux";
    const FormItem = Form.Item;
    
    @inject("appStore") @observer
    class VideoForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                // video:this.props.video
            };
            this.onChangeStartTime = this.onChangeStartTime.bind(this);
            this.onChangeEndTime = this.onChangeEndTime.bind(this);
        };
        setValue = (prop, value) => {
            let { video } = this.props;
            video[prop] = value;
        };
        handleTypeChange = value => {
            let { video } = this.props;
            video.type = value;
            this.props.form.setFieldsValue({
                type: value,
            });
        };
        handleCourseTypeChange = value => {
            let { video } = this.props;
            video.courseType = value;
            this.props.form.setFieldsValue({
                courseType: value,
            });
        };
        onChangeStartTime(value, dateString) {
            let { video } = this.props;
            video.startTime = value;
            this.props.form.setFieldsValue({
                startTime: value,
            });
        }
        onChangeEndTime(value, dateString) {
            let { video } = this.props;
            video.endTime = value;
            this.props.form.setFieldsValue({
                endTime: value,
            });
        }
        beforeUpload = (file) => {
            console.log('file', file);
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJPG) {
                message.error('只能上传JPG或PNG格式的图片文件!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error('Image must smaller than 2MB!');
            }
            return isJPG && isLt2M;
        };
        handleChange = info => {
            if (info.file.status === 'uploading') {
                this.setState({ loading: true });
                return;
            }
            if (info.file.status === 'done') {
                let pic = {};
                if (info.file.response && 0 === info.file.response.result) {
                    console.log('file', info.file);
                    pic.uid = info.file.response.ret.slice(0, /\.{1}[a-z]{1,}$/.exec(info.file.response.ret).index);
                    pic.name = info.file.name || info.file.response.ret;
                    pic.status = 'done';
                    pic.url = info.file.response.ret;
                }
                this.props.video.cover = pic.url;
                this.props.form.setFieldsValue({
                    cover: pic.url,
                });
                this.getBase64(info.file.originFileObj, imageUrl =>
                    this.setState({
                        imageUrl,
                        loading: false,
                    }),
                );
            }
        };
        getBase64 = (img, callback) => {
            const reader = new FileReader();
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(img);
        };
        render() {
            const { getFieldDecorator } = this.props.form;
            const formItemLayout = {
                labelCol: { span: 5 },
                wrapperCol: { span: 16 }
            };
            const video = this.props.video || {};
            const type = this.props.type;
            const dateFormat = "YYYY/MM/DD, h:mm:ss"
            const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;
            const baseImageUrl = process.env.NODE_ENV === 'development' ? config.baseImageUrl.dev : config.baseImageUrl.pro
            const videoImage = video || {};
            const imageUrl = (videoImage.cover) || this.state.imageUrl;
            const uploadButton = (
                <div>
                    <Icon type={this.state.loading ? 'loading' : 'plus'} />
                    <div className="ant-upload-text">选择封面图片</div>
                </div>
            );
            console.log("vide==========",video)
            return (
                <Form layout="horizontal">
                    <FormItem label="名称" {...formItemLayout}>
                        {
                            video && type === "view" ? video.name :
                                getFieldDecorator("name", {
                                    rules: [{ required: true, message: "请输入直播名称!" }],
                                    initialValue: video.name
                                })(
                                    <Input type="text" placeholder="请输入名称"
                                        onChange={(e) => this.setValue("name", e.target.value)}
                                    />
                                )
                        }
                    </FormItem>
                    <FormItem label="直播封面" {...formItemLayout}>
                        <Upload
                            accept={'.jpg,.jpeg,.png'}
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader orgCover"
                            showUploadList={false}
                            showRemoveIcon={type === "view" ? false : true}
                            action={baseUrl + "media/upload"}
                            beforeUpload={this.beforeUpload}
                            onChange={this.handleChange}
                        >
                            {
                                getFieldDecorator("cover", {
                                    rules: [{ required: true, message: "请上传直播封面!" }],
                                    initialValue: imageUrl
                                })(
    
                                    imageUrl ? <img style={
       { width: "auto", height: 100 }} src={baseImageUrl + imageUrl} alt="avatar" /> : uploadButton
    
                                )}
                        </Upload>
                    </FormItem>
                    <FormItem label="直播类型" {...formItemLayout}>
                        {
                            video && type === "view" ? video.type :
                                getFieldDecorator("type", {
                                    rules: [{ required: true, message: "请输入直播类型!" }],
                                    initialValue: video.type
                                })(
                                    <Select onChange={this.handleTypeChange}>
                                        <Select.Option value="selected">精选</Select.Option>
                                        <Select.Option value="common">普通</Select.Option>
                                    </Select>
                                )
                        }
                    </FormItem>
                    <FormItem label="课程类型" {...formItemLayout}>
                        {
                            video && type === "view" ? video.courseType :
                                getFieldDecorator("courseType", {
                                    initialValue: video.courseType
                                })(
                                    <Select onChange={this.handleCourseTypeChange}>
                                        <Select.Option value="junior">初级</Select.Option>
                                        <Select.Option value="middle">中级</Select.Option>
                                        <Select.Option value="senior">高级</Select.Option>
                                    </Select>
                                )
                        }
                    </FormItem>
                    <FormItem label="开始时间" {...formItemLayout}>
                        {
                            video && type === "view" ? video.startTime :
                                getFieldDecorator("startTime", {
                                    rules: [{ required: true, message: "请输入时间!" }],
                                    initialValue: video.startTime?moment(video.startTime, dateFormat):""
                                })(
                                    <DatePicker showTime onChange={this.onChangeStartTime} />
                                )
                        }
                    </FormItem>
                    <FormItem label="结束时间" {...formItemLayout}>
                        {
                            video && type === "view" ? video.endTime :
                                getFieldDecorator("endTime", {
                                    rules: [{ required: true, message: "请输入时间!" }],
                                    initialValue: video.endTime?moment(video.endTime, dateFormat):""
                                })(
                                    <DatePicker showTime onChange={this.onChangeEndTime} />
                                )
                        }
                    </FormItem>
                    <FormItem label="内容" {...formItemLayout}>
                        {
                            video && type === "view" ? video.content :
                                getFieldDecorator("content", {
                                    rules: [{ required: true, message: "请输入内容!" }],
                                    initialValue: video.content
                                })(
                                    <Input type="text" placeholder="请输入内容"
                                        onChange={(e) => this.setValue("content", e.target.value)}
                                    />
                                )
                        }
                    </FormItem>
                    <FormItem label="直播老师" {...formItemLayout}>
                        {
                            video && type === "view" ? video.teacher :
                                getFieldDecorator("teacher", {
                                    rules: [{ required: true, message: "请输入直播老师!" }],
                                    initialValue: video.teacher
                                })(
                                    <Input type="text" placeholder="请输入直播老师名称"
                                        onChange={(e) => this.setValue("teacher", e.target.value)}
                                    />
                                )
                        }
                    </FormItem>
                </Form>
            );
        }
    }
    
    VideoForm = Form.create({})(VideoForm);
    const mapStateToProp = state => ({
    });
    const mapDispatchToProp = dispatch => ({
    });
    export default connect(
        mapStateToProp,
        mapDispatchToProp
    )(VideoForm);

[20201221185550234.png]: /images/20221120/736ffafcadbd46f0ac18f6d7652459fe.png