antd upload上传声音

比眉伴天荒 2022-12-28 06:26 141阅读 0赞

import React from 'react';
    import {
        Upload
    } from 'antd';
    import {UploadOutlined} from '@ant-design/icons';
    class LeverUserSound extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            };
        };
        handleChange = (info) => {
            if (info.file.status === 'uploading') {
                return;
            }
            if (info.file.status === 'done') {
                let { audio } = this.state;
                audio = audio || {};
                if (info.file.response && 0 === info.file.response.result) {
                    console.log('file', info.file);
                    audio.uid = info.file.response.ret;
                    audio.fileName = info.file.name || info.file.response.ret;
                    audio.url = info.file.response.ret;
                }
                console.log('audio', audio);
                this.updateSound(audio);
            }
        };
        updateSound = (audio) => {
        };
        render() {
    
            let soundView = <div>
                <p className="ant-upload-drag-icon"><UploadOutlined /></p>
                <p className="ant-upload-text">点击或者拖拽上传语音提醒文件</p>
                <p className="ant-upload-hint">每次只能上传一个音频文件</p>
            </div>;
            let { audio } = this.state;
            if (audio) {
                soundView = <audio controls="controls" ref={inst => this.audio = inst}>
                    <source src={global.BaseImageUrl + audio.url} type="audio/mp3" />
                    Your browser does not support this audio format.
                </audio>
            }
            return (
                <div>
                    <Upload.Dragger onChange={this.handleChange} showUploadList={false} action='https://www.mocky.io/v2/5cc8019d300000980a055e76'>
                        {soundView}
                    </Upload.Dragger>
                </div>
            );
        }
    }
    
    export default LeverUserSound