前端文件上传与文件相关操作

adminIvan

于 2024-07-26 22:20:41 发布

阅读量109

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/l1965564484/article/details/140594397

版权

1.传输方式

二进制blob传输，通过formData传输

base64传输，转为base64传输，bese64通俗一点就是一个很长很长的字符串（时间较慢）

2.相关对象

files：通过input标签读过来的文件对象，file类是blob的子类

blob：不可变的二进制内容，包含很多操作方法

formData：用于和后端传递的对象，搭载file传递给后端

fileReader：多用于把文件读取成为某种形式，如base64，txt文本

3.文件上传实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <input type="file" name="file" class="ipt">
    <img src="" alt="">
    <div class="msg"></div>
</body>

<script>
    let ipt = document.querySelector('.ipt');
    let img = document.querySelector('img');
    let file;
    let message = document.querySelector('.msg')
    ipt.addEventListener('change', function (e) {
        file = e.target.files[0];
        //如果大于10MB就警告
        if (file.size > 1 * 1024 * 1024) {
            alert("文件大小超出1MB");
        }

        //也可以通过File类手动创建一个file对象（没什么意义）
        // console.log(new File(["你好"],"a.txt"))
        // console.log(e.target.files[0])
        let _sliceBlob = new Blob([file]).slice(1, 1 * 1024);
        _sliceBlob = new File([_sliceBlob], "aaa.png")
        console.log(_sliceBlob);

        //fileReader
        let fr = new FileReader();
        fr.readAsDataURL(_sliceBlob)//将切割后的blob转为base64
        //不能直接获取转换结果，转换过程是异步的
        fr.onload = function () {
            console.log(fr.result)
            img.src = fr.result
        }
        //可以使用fileReader做缩略图以及文本预览

        submit()


    })
    //文件上传到后端
    function submit() {
        let _formData = new FormData();
        _formData.append("aaa",file)
        console.log(_formData)
        const xhr = new XMLHttpRequest();
        xhr.open('POST','/upload',true);
        xhr.onload = function(){
            console.log(xhr.status)
            if(xhr.status == 200){
                message.textContent = '文件上传成功';
                message.style.color = 'green';
            }else {
                message.textContent = '文件上传失败';
                message.style.color = 'red';
            }
        }
        xhr.send(_formData);
    }
</script>

</html>

切片上传：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./node_modules/axios/dist/axios.js"></script>

<body>
    <input type="file">
    <p></p>
</body>

<script>
    let ipt = document.querySelector('input');
    let fileObj;
    let present = "";
    let p = document.querySelector('p')
    ipt.addEventListener('change', (e) => {
        fileObj = e.target.files[0];
        console.log(present);
        submit()
    })

    async function submit() {
        let sizeOneTime = 1 * 1024 * 1024;
        let fileSize = fileObj.size;
        let curSize = 0;
        while (curSize < fileSize) {
            let _formData = new FormData;
            _formData.append(fileObj.name + "file", fileObj.slice(curSize, curSize + sizeOneTime))
            await axios.post("http://localhost:3000/upload", _formData)
            present = Math.min((curSize / fileSize) * 100, 100)
            curSize += sizeOneTime;
            p.textContent = present + "%";
        }
        p.textContent = 100 + "%";
    }
</script>

</html>