前端获取file文件处理的2种方案<推荐第一种>

1.使用URL静态方法<获取一个内存链接>

URL.createObjectURL()

• 在内存中创建一个临时的 url , 该 url 生命周期为 document 的生命周期

const url = URL.createObjectURL(file);

URL.revokeObjectURL()

• 不需要 url 时记得释放

URL.revokeObjectURL(objectURL

• 案例:

import { useRef } from "react";


function index(params) {
    console.log("index",params);


    const ipt = useRef();
    const imgs = useRef();
    let urls = [];


    const selectHandler = (e) => {
        const fileArr = Array.from(e.target.files);
        const imgContainerDom = imgs.current;
        
        for (const file of fileArr) {
            const url = URL.createObjectURL(file);
            urls.push(url)
            const imgDom = document.createElement("img");
            imgDom.src = url;
            imgContainerDom.appendChild(imgDom)
        }


        console.log(urls);
    }


    const revokeHandler = () => {
        for (const url of urls) {
            URL.revokeObjectURL(url);
            console.log(url + "已释放")
        }
    }


    return (
        <div className="test">
            <h1>index</h1>
            <input multiple ref={ipt} type="file" name="" id="" onChange={selectHandler} />
            <input type="button" value="释放" onClick={revokeHandler} />
            <div ref={imgs}></div>
        </div>
        );
}






export defaul

2. 使用 FileReader 对象<获取一个base64>

• 构造 reader 对象读取 file 文件, 监听 onload 事件, 将读取完成后获取到一个base64编码
• 案例:

import { useRef } from "react";


function index(params) {
    console.log("index",params);


    const ipt = useRef();
    const imgs = useRef();
    const taks = [];


    const selectHandler = (e) => {
        const fileArr = Array.from(e.target.files);
        const imgContainerDom = imgs.current;
        for (const file of fileArr) {
            const reader = new FileReader();
            reader.readAsDataURL(file);


            const promise = new Promise((resolve)=>{
                reader.onload = function (e){
                    const imgDom = document.createElement("img");
                    const src = e.target.result;
                    imgDom.src = src;
                    imgContainerDom.appendChild(imgDom);
                    resolve(src);
                }
            })


            taks.push(promise);
        }


        Promise.all(taks).then((value)=>{
            console.log(value)
        })
    }




    return (
        <div className="test">
            <h1>index</h1>
            <input multiple ref={ipt} type="file" name="" id="" onChange={selectHandler} />
            <div ref={imgs}></div>
        </div>
        );
}






export def