input上传图片、音频并预览

 

以上是对大小类型进行一些判断，还有转foromdata数据。

import { useEffect, useState } from 'react';
import './index.scss'

export default function Song() {

    const [songfiles, setSongFiles] = useState([])
    const files =(e)=>{
        let file = e.target.files[0]//这是给到后端的音频文件
        const url = URL.createObjectURL(file);
        console.log(url);这是用来预览的方法和结果，直接给audio的src
        let a = [...songfiles]
        a.push(file)
        setSongFiles(a)
    }
    useEffect(()=>{
        console.log(songfiles);
    },[songfiles])
    const del =(index)=>{
        let a = [...songfiles]
        a.splice(index,1)
        setSongFiles(a)
    }
    return(
        <div className='song'>
            <div>
                upload your song<input type='file' onChange={(e)=> files(e)} multiple title="You haven't selected any songs yet"/>
            </div>
            <div>
                {
                    (songfiles != []) && songfiles.map((item,index) => {
                        return(
                            <div key={index} className='songbox'>
                                <div>{item.name}</div>
                                <span onClick={()=> del(index)}></span>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

.song {
    >div:nth-child(1){
        width: 40%;
        height: 40px;
        position: relative;
        background-color: white;
        color: black;
        text-transform: lowercase;
        font-size: 16px;
        font-weight: 400;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        margin-top: 15px;
        margin-left: 5px;
        margin-bottom: 10px;
        >input{
            height: 100%;
            width: 100%;
            opacity: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: pointer;
        }
    }
    .songbox {
        position: relative;
        height: 30px;
        padding-left: 5px;

        >div:nth-child(1) {
            display: inline-block;
            height: 100%;
            line-height: 30px;
            vertical-align: middle;
            text-transform: lowercase;
            font-size: 14px;
            letter-spacing: 1.5px;
        }
        >span {
            display: inline-block;
            height: 20px;
            width: 20px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            transition: all 1s;
            &::after {
                position: absolute;
                left:7.5px;
                content: ' ';
                height: 20px;
                width: 2px;
                background-color: #ABABAB;
                transform:rotate(45deg);
            }
            &::before {
                position: absolute;
                left: 7.5px;
                content: ' ';
                height: 20px;
                width: 2px;
                background-color: #ABABAB;
                transform: rotate(-45deg);
            }
            &:hover{
                transform: translateY(-50%) rotate(180deg);
            }
        }
    }
}

以上是音频组件和样式