JS实现文件的上传与下载

最新推荐文章于 2024-05-27 16:02:25 发布

七里香777

最新推荐文章于 2024-05-27 16:02:25 发布

阅读量1.8k

点赞数 1

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44286392/article/details/127540305

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

原生JS实现文件上传

利用<input type="file">，带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。
利用URL.createObjectURL()，URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

<body>
    <input type="file" value="选择文件" id="file">
    <img src="" id="img" alt="暂无" width="70" height="70">
</body>
<script>
    const file = document.querySelector("#file");
    const img = document.querySelector("#img");
    file.onchange = function(e) {
        console.log(e);
        img.src = URL.createObjectURL(e.target.files[0]);
    }
</script>

演示：

上传前： 在这里插入图片描述
上传成功：

原生JS实现文件下载

<body>
    <input type="file" value="选择文件" id="file">
    <img src="" id="img" alt="暂无" width="70" height="70">
    <button id="down">下载</button>
</body>
<script>
    const file = document.querySelector("#file");
    const img = document.querySelector("#img");
    const down = document.querySelector("#down");

    let file1 = null;
    file.onchange = function(e) {
        console.log(e);
        file1 = e.target.files[0];  //  文件上传
        img.src = URL.createObjectURL(e.target.files[0]);
    }

    down.onclick = function() {
        let a = document.createElement("a");
        a.setAttribute("href", URL.createObjectURL(file1));
        a.setAttribute("download", "filename");
        a.click();
    }
</script>

Vue实现文件上传与下载

下载

三种方式：

前端创建超链接，通过a标签的链接向后端发送get请求，接收后端的文件流。（或者创建div标签，动态创建a标签）
通过创建iframe
向后端发送post请求，使用Blob格式

上传

1.input方式

vue中的文件上传主要分为两步：前台获取到文件和提交到后台。

步骤：

①前台获取文件，主要是采用input框来实现
通过file类型的input框实现文件上传；然后通过设置multiple="multiplt"实现了多文件上传，并且使用accept实现了上传文件类型限制；最后通过监听change事件，前台获取到上传的文件；通过change事件中的event.target.files就能获取到上传的文件了，在上面再次对获取的文件进行了类型限制。

②数据提交
获取到文件数据后，采用FormData的方式将数据提交到后台。