修改子组件

components/upload/common.less

+:global .upload-list-picture {
+    position: relative;
+    .ant-upload-list{
+        margin-top: 50px;
+    }
+  .ant-upload-select-picture-card{
+  background-color: transparent !important;
+  border-style: none !important;
+ }
+ .ant-upload-list-picture-card .ant-upload-list-item {
+  border-style: none;
+  display: flex;
+  margin:0;
+  :first-child{
+    // height: 100%;
+    flex: 1;
+  }
+ }
+ .ant-upload-list-item-info::before {
+   position: absolute;
+   top: 0;
+ left: 0;
+   z-index: 1;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0,0,0,0.5);
+   opacity: 0;
+   -webkit-transition: all .3s;
+   transition: all .3s;
+   content: ' ';
+ }
+ .ant-upload-list-item:hover .ant-upload-list-item-info::before{
+   opacity: 1;
+ }
+ .ant-upload-list-item-card-actions.picture{
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   z-index: 10;
+   opacity: 1;
+   transform: translate(-30%, -50%);
+   white-space: nowrap;
+ }
+ .ant-upload-list-item-card-actions .anticon{
+   color: #fff;
+ }
+ .ant-upload-list-item-uploading.ant-upload-list-item{
+  background-color: transparent !important;
+ }
+.ant-upload-animate-enter {
+   animation-name: uploadAnimateInlineIn;
+ }
+ .ant-upload-animate-leave {
+   animation-name: uploadAnimateInlineOut;
+ }
+
+ .ant-upload-list-item-name{
+   position: absolute;
+   top:68px;
+   margin: 0;
+   padding: 0;
+   font-size: 12px;
+   display: block;
+ }
+ .ant-upload-list-picture-card .ant-upload-list-item-thumbnail{
+   position: inherit;
+ }
+ .ant-upload-list-picture-card .ant-upload-list-item-thumbnail img{
+   margin: 0 auto;
+   height: 60px;
+   width: auto;
+   max-width: 80px
+ }
+    .ant-upload.ant-upload-select-picture-card{
+        display: block;
+        height: auto;
+        position: absolute;
+        top: 0;
+    }
+}
+:global .upload-list-text{
+
+}
+:global .ant-upload-list-item-info{
+ padding: 0 20px 0 4px;
+}

components/upload/config.js

+/* eslint-disable */
+export const fileConfig={
+    'image':{},
+    'ppt':{
+        thumbUrl:`${CDN_PATH}/pptIcon.png`
+    },
+    'pptx':{
+      thumbUrl:`${CDN_PATH}/pptIcon.png`
+    },
+    'zip':{
+        thumbUrl:`${CDN_PATH}/zipIcon.png`
+    },
+    'xlsx':{
+        thumbUrl:`${CDN_PATH}/xlsIcon.png`
+    },
+    'xls':{
+        thumbUrl:`${CDN_PATH}/xlsIcon.png`
+    },
+    'doc':{
+        thumbUrl:`${CDN_PATH}/docIcon.png`
+    },
+    'docx':{
+        thumbUrl:`${CDN_PATH}/docIcon.png`
+    },
+    'pdf':{
+        thumbUrl:`${CDN_PATH}/pdfIcon.png`
+    },
+    'other':{
+        thumbUrl:`${CDN_PATH}/otherIcon.png`
+    }
+}

components/upload/detail.less

+@import "~@/theme/common";
+
+.fileList {
+    display: flex;
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+.fileListCenter {
+    justify-content: center;
+}
+
+.wrap {
+    position: relative;
+    cursor: pointer;
+}
+
+.wrap:hover .fileBoxHove {
+    display: flex;
+}
+
+.fileBox {
+    padding: 10px;
+    width: 100px;
+    display: flex;
+    flex-flow: column;
+    justify-items: center;
+    align-items: center;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.fileBoxHove {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+
+    .icon {
+        color: #fff;
+        padding: 5px;
+    }
+}
+
+.fileName {
+    margin-top: 5px;
+    width: 80px;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(90, 104, 118, 1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.fileStyle {
+    height: 56px;
+}
+
+.dialog {
+    width: 900px !important;
+    min-height: 500px;
+}
+
+.textUploadList {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    -webkit-font-feature-settings: 'tnum';
+    font-feature-settings: 'tnum';
+    zoom: 1;
+
+    .textUploadListItem {
+        position: relative;
+        height: 22px;
+        margin-top: 8px;
+        font-size: 14px;
+
+        .textUploadListItemInfo {
+            height: 100%;
+            padding: 0 12px 0 4px;
+
+            .textUploadListItemBox {
+                display: flex;
+                align-items: center;
+
+                .textUploadListItemInfoName {
+                    display: inline-block;
+                    margin-right: 10px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: #5a6876;
+
+                    &:hover {
+                        color: #5c99ff;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.downIcon {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    cursor: pointer;
+}
+
+.pictureTextUploadList {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    -webkit-font-feature-settings: 'tnum';
+    font-feature-settings: 'tnum';
+    zoom: 1;
+    overflow: hidden;
+    width: 100%;
+
+    .textUploadListItem {
+        position: relative;
+        display: flex;
+        justify-items: center;
+        height: 41px;
+        margin-top: 10px;
+        font-size: 14px;
+        width: 100%;
+
+        .textUploadListItemInfo {
+            width: 100%;
+            height: 100%;
+            padding: 0 12px 0 4px;
+
+            .textUploadListItemBox {
+                display: flex;
+                align-items: center;
+                height: 100%;
+
+                .fileImgStyle {
+                    width: 32px;
+                    margin-right: 10px;
+                    cursor: pointer;
+                }
+
+                .textUploadListItemInfoName {
+                    display: inline-block;
+                    margin-right: 10px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: @textGeneralColor;
+
+                    &:hover {
+                        color: @primaryColor;
+                    }
+                }
+                &:hover{
+                    .downIcon{
+                        opacity: 1;
+                    }
+                }
+
+                .downIcon {
+                    display: inline-block;
+                    position: absolute;
+                    right: 0;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    cursor: pointer;
+                    color: @textSupplyColor;
+                    opacity: 0;
+                    transition: opacity 0.2s linear;
+                }
+            }
+        }
+    }
+}
+
+
+// .textUploadListItemInfo:hover {
+//     background: #e6f7ff;
+// }

components/upload/index.js

+import React from 'react';
+import { Button, Icon, message } from 'antd';
+import moment from 'moment';
+import Upload from '@/submodule/ant_components/BIUpload';
+import { getToken } from '@/services/api';
+import { getRandom } from '@/utils/utils';
+import { checkoutFileType } from './utils';
+import Preview from './preview';
+import styles from './styles.less';
+import './common.less';
+// 此组件用于处理airtable里面附件上传
+/* eslint-disable */
+message.config({
+    maxCount: 1,
+});
+class UploadCom extends React.Component {
+    state = {
+        fileList: [],
+        token: null,
+        domain: null,
+    };
+    preFileList = []; // 即将要上传的附件
+    componentDidMount() {
+        const fileList = this.formateFileList(this.props.value) || [];
+        this.preFileList = fileList;
+        this.setState({ fileList });
+        const dom = document.querySelector('.Upload');
+        if (dom) {
+            dom.addEventListener('mouseover', this.hoverFileName, false);
+            dom.addEventListener('mouseout', this.fileOut, false);
+        }
+    }
+    componentWillUnmount() {
+        const dom = document.querySelector('.Upload');
+        if (dom) {
+            dom.removeEventListener('mouseover', this.hoverFileName, false);
+            dom.removeEventListener('mouseout', this.fileOut, false);
+        }
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (JSON.stringify(nextProps.value) !== JSON.stringify(this.props.value)) {
+            const value = Array.isArray(nextProps.value) ? nextProps.value : [];
+            const fileList = this.formateFileList(value);
+            this.preFileList = fileList;
+            this.setState({ fileList });
+        }
+    }
+    hoverFileName = (e) => {
+        if (e.target.className === 'ant-upload-list-item-info') {
+            const dom = document.getElementById('show-file-name');
+            var rect = e.target.getBoundingClientRect();
+            dom.innerHTML = e.target.lastChild.lastChild.innerHTML;
+            dom.style.display = 'block';
+            dom.style.top = rect.top + rect.height + 'px';
+            dom.style.left = e.x - 100 + 'px';
+        }
+    };
+    fileOut = (e) => {
+        if (e.target.className === 'ant-upload-list-item-info') {
+            const dom = document.getElementById('show-file-name');
+            dom.innerHTML = '';
+            dom.style.display = 'none';
+            dom.style.top = e.y + 30 + 'px';
+            dom.style.left = e.x - 50 + 'px';
+        }
+    };
+    //获取七牛上传token
+    getToken = async () => {
+        let response = await getToken();
+        if (response && response.success && response.data) {
+            this.setState({
+                token: response.data.token,
+                domain: response.data.domain,
+            });
+        }
+    };
+    //自定义七牛文件唯一key
+    getKey = (file) => {
+        if (!file) return;
+        let suffix = file.name.match(/\.\w+$/)[0];
+        let rand6 = getRandom();
+        let time = moment().format('YYYYMMDDHHmmss');
+        return time + rand6 + suffix;
+    };
+    //七牛上传额外数据，token和key
+    getData = (file) => {
+        const { token } = this.state;
+        return {
+            token,
+            key: this.getKey(file),
+        };
+    };
+
+    static checkoutFileType = checkoutFileType;
+    formateFileList = (list = []) => {
+        const { fileList, domain } = this.state;
+        return list.map((item, key) => {
+            //增加自定义回显数据格式
+            let value = this.props.setFormat ? this.props.setFormat(item) : item;
+            //处理上传成功但没保存到后台的数据（onSaveFileList把数据同步到父组件导致子组件重新渲染处理数据不一致）
+            let file = fileList
+                .filter((f) => f.status === 'done' && f.response)
+                .find((f) => {
+                    let url = '';
+                    if (f.response && f.response.key) {
+                        url = `${domain ? 'https://' + domain : CDN_HOST}/${f.response.key}`;
+                    }
+                    return url === value.value;
+                });
+            if (file) {
+                return file;
+            }
+            //处理保存到后台的数据
+            const url = `${item.domain ? 'https://' + item.domain : CDN_HOST}/${item.value}`;
+            return {
+                ...value,
+                uid: value.value,
+                url,
+                status: value.status || 'done',
+                ...checkoutFileType(url),
+            };
+        });
+    };
+    onSaveFileList = (fileList = []) => {
+        const { domain } = this.state;
+        // if (this.preFileList.length > fileList.length) return;
+        if (this.props.onChange && this.preFileList.length === fileList.length) {
+            const newList = fileList
+                .filter((item) => item.value || (item.response || {}).key)
+                .map((item) => ({
+                    name: item.name,
+                    value: item.value || (item.response || {}).key,
+                    size: item.size,
+                    url: item.url || `${domain ? 'https://' + domain : CDN_HOST}/${(item.response || {}).key}`,
+                    domain: item.domain || domain,
+                }));
+            this.props.onChange(newList);
+        }
+    };
+    beforeUpload = async (file, fileList) => {
+        this.preFileList = this.state.fileList.concat([], fileList);
+        await this.getToken();
+        return true;
+    };
+    onChange = async ({ file, fileList, event }) => {
+        //ant upload组件实时更新上传状态必须实时setState最新文件列表
+        let newList = fileList.slice();
+
+        this.setState({ fileList }, () => {
+            if (file.status === 'done' && file.response) {
+                this.onSaveFileList(newList.filter((ls) => ls.status === 'done' || ls.value));
+            }
+        });
+    };
+    previewFile = (file) => {
+        return new Promise((res, rej) => {
+            const obj = checkoutFileType(file.name);
+            const typeArr = file.name.match(/\.[a-zA-Z]+$/);
+            const type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
+            if (!['png', 'gif', 'bmp', 'jpg', 'jpeg'].includes(type)) {
+                res(obj.thumbUrl);
+            }
+        });
+    };
+    onPreview = (file) => {
+        if (this.model && this.model.onPreview) {
+            this.model.onPreview(file.url, file.value);
+        }
+    };
+    onRemove = (file) => {
+        const fileList = this.state.fileList || [];
+        const newFileList = fileList.filter((item) => item.uid !== file.uid);
+        this.preFileList = newFileList;
+        this.onSaveFileList(newFileList);
+        this.setState({ fileList: newFileList });
+    };
+
+    render() {
+        const { btnText, renderButton } = this.props;
+        const { fileList } = this.state;
+        const classObj = {
+            picture: 'upload-list-picture',
+            text: 'upload-list-text',
+        };
+        return (
+            <div style={{ padding: '10px', paddingBottom: '20px', ...(this.props.style || {}) }}>
+                <Upload
+                    onMouseEnter={this.handleHoverOn}
+                    // onMouseLeave={this.handleHoverOff}
+                    listType="picture-card"
+                    // {...this.props}
+                    action="https://upload-z1.qiniup.com/" //七牛上传地址
+                    data={this.getData}
+                    multiple
+                    className={`${classObj[this.props.listType] || 'upload-list-picture'}`}
+                    fileList={fileList}
+                    previewFile={this.previewFile}
+                    beforeUpload={this.beforeUpload}
+                    onPreview={this.onPreview}
+                    onChange={this.onChange}
+                    onRemove={this.onRemove}
+                    showUploadList={{ showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: true }}
+                >
+                    {renderButton ? (
+                        renderButton
+                    ) : (
+                            <Button>
+                                <Icon type="upload" /> {btnText || '上传'}
+                            </Button>
+                        )}
+                </Upload>
+                <Preview ref={(dom) => (this.model = dom)} />
+                {/* 用户处理hover */}
+                <div id="show-file-name" className={styles.hoverBox}></div>
+            </div>
+        );
+    }
+}
+
+UploadCom.Preview = Preview;
+export default UploadCom;

components/upload/preview.js

+import React from 'react';
+import { message, Modal } from 'antd';
+import styles from './detail.less';
+
+/* eslint-disable */
+export default class uploadDetail extends React.Component {
+    state = {
+        showDialog: false,
+        type: 'image',
+        url: '',
+    };
+    onPreview = (url, name) => {
+        const typeArr = (name || url).match(/\.[a-zA-Z]+$/);
+        let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
+        type = type.toLowerCase();
+        if (['png', 'gif', 'bmp', 'jpg', 'jpeg', 'heic'].includes(type)) {
+            this.setState({ showDialog: true, type: 'image', url });
+        } else if (['doc', 'docx', 'document', 'xls', 'xlsx', 'ppt', 'pptx'].includes(type)) {
+            this.setState({ showDialog: true, type: 'office', url });
+        } else if (type === 'pdf') {
+            this.setState({ showDialog: true, type: 'pdf', url });
+        } else {
+            message.warn('暂不支持预览');
+        }
+    };
+    handleCancel = () => {
+        this.setState({ showDialog: false });
+    };
+    render() {
+        const { showDialog, type, url } = this.state;
+        return (
+            <div>
+                <Modal className={styles.dialog} visible={showDialog} onCancel={this.handleCancel} footer={null}>
+                    {type === 'image' ? (
+                        <img alt="example" style={{ width: '100%' }} src={url + '?imageMogr2/auto-orient'} />
+                    ) : null}
+                    {type === 'office' ? (
+                        <iframe
+                            width={'100%'}
+                            height={500}
+                            src={`https://view.officeapps.live.com/op/view.aspx?src=${url}`}
+                        />
+                    ) : null}
+                    {type === 'pdf' ? <iframe width={'100%'} height={500} src={`${url}`} /> : null}
+                </Modal>
+            </div>
+        );
+    }
+}

components/upload/styles.less

+.hoverBox{
+    position: fixed;
+    padding: 12px;
+    width:200px ;
+    min-height:32px ;
+    display: none;
+    background: #fff;
+    z-index: 100;
+    background-color: #fff;
+    background-clip: padding-box;
+    border-radius: 4px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+  }
\ No newline at end of file

components/upload/utils.js

+/* eslint-disable max-len */
+import { fileConfig } from './config';
+
+export const checkoutFileType = (url = '') => {
+    const typeArr = url.match(/\.[a-zA-Z]+$/);
+    let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
+    type = type.toLowerCase();
+    if (type === 'png' || type === 'jpg' || type === 'gif' || type === 'bmp' || type === 'jpeg' || type === 'heic') {
+        return { thumbUrl: `${url}?imageView2/1/w/120/h/120`, fileType: type };
+    }
+    return fileConfig[type] ? fileConfig[type] : fileConfig.other;
+};
+export const previewFile = (url) => {
+    const typeArr = url.match(/\.[a-zA-Z]+$/);
+    let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
+    type = type.toLowerCase();
+    if (
+        type === 'png'
+        || type === 'jpg'
+        || type === 'gif'
+        || type === 'bmp'
+        || type === 'jpeg'
+        || type === 'pdf'
+        || type === 'heic'
+    ) {
+        window.open(url, '_blank');
+    } else {
+        const new_url = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
+        window.open(new_url, '_blank');
+    }
+};
+export const handleName = (url) => {
+    const typeArr = url.match(/\.[a-zA-Z]+$/);
+    if (!typeArr || typeArr.length === 0) return [url];
+    const newStr = url.replace(typeArr[0], '');
+    return [newStr, typeArr[0]];
+};