文件上传下载

原生js实现

上传

html

<input type="file" id="file">

<input type="file" id="file">

js

    let xhr=null;
    //开始上传
    function sureUpload() {
        // 获取到选择的文件
        const file=document.getElementById('file').files[0],
        // new 一个表单数据对象,用于存放文件数据
        form=new FormData();
        // ajax对象
        xhr=new XMLHttpRequest();
        //设置请求头参数的方式,如果没有可忽略此行代码
        // xhr.setRequestHeader("token", token);

        // 添加文件到表单中
        form.append("file",file);
        // 设置请求方式 路径  是否异步
        xhr.open("post","/file/upload",true);
        
        // 上传完成
        xhr.onload=uploadSuccess;

        // 上传出错
        xhr.onerror=uploadError;

        // 上传中
        xhr.onprogress=process;

        // 发送请求
        xhr.send(form);
    }

    function uploadSuccess(e) {
        console.log(JSON.parse(e.currentTarget.response));
        alert("上传成功");
    }

    function uploadError(err) {
        console.log(err);
        alert("上传失败");
    }

    /**
     * 中断上传 
     **/
    function cnacelUpload() {
        xhr.abort();
    }

    function process(e) {
        // 总量 已发送 否具有可以计算的长度
        let { total, loaded, lengthComputable } = e;
        if(lengthComputable){
            console.log(total,"---",loaded)
        }
    }

    let xhr=null;
    //开始上传
    function sureUpload() {
        // 获取到选择的文件
        const file=document.getElementById('file').files[0],
        // new 一个表单数据对象,用于存放文件数据
        form=new FormData();
        // ajax对象
        xhr=new XMLHttpRequest();
        //设置请求头参数的方式,如果没有可忽略此行代码
        // xhr.setRequestHeader("token", token);

        // 添加文件到表单中
        form.append("file",file);
        // 设置请求方式 路径  是否异步
        xhr.open("post","/file/upload",true);
        
        // 上传完成
        xhr.onload=uploadSuccess;

        // 上传出错
        xhr.onerror=uploadError;

        // 上传中
        xhr.onprogress=process;

        // 发送请求
        xhr.send(form);
    }

    function uploadSuccess(e) {
        console.log(JSON.parse(e.currentTarget.response));
        alert("上传成功");
    }

    function uploadError(err) {
        console.log(err);
        alert("上传失败");
    }

    /**
     * 中断上传 
     **/
    function cnacelUpload() {
        xhr.abort();
    }

    function process(e) {
        // 总量 已发送 否具有可以计算的长度
        let { total, loaded, lengthComputable } = e;
        if(lengthComputable){
            console.log(total,"---",loaded)
        }
    }

下载

/**
* 向指定路径发送下载请求
* @param{String} url 请求路径
*/
function downLoadByUrl(url){
        var xhr = new XMLHttpRequest();
        //GET请求,请求路径url,async(是否异步)
        xhr.open('GET', url, true);
        //设置请求头参数的方式,如果没有可忽略此行代码
        // xhr.setRequestHeader("token", token);
        //设置响应类型为 blob
        xhr.responseType = 'blob';
        //关键部分
        xhr.onload = function (e) {
            //如果请求执行完成且成功
            if (this.status == 200) {
                var blob = this.response;
                var filename = "我是文件名.xxx";//如123.xls
                var a = document.createElement('a');

                blob.type = "application/octet-stream";
                //创键临时url对象
                var url = URL.createObjectURL(blob);

                a.href = url;
                a.download=filename;
                // 开始下载
                a.click();
                //释放之前创建的URL对象
                window.URL.revokeObjectURL(url);
            }
        };
        //发送请求
        xhr.send();
}

/**
* 向指定路径发送下载请求
* @param{String} url 请求路径
*/
function downLoadByUrl(url){
        var xhr = new XMLHttpRequest();
        //GET请求,请求路径url,async(是否异步)
        xhr.open('GET', url, true);
        //设置请求头参数的方式,如果没有可忽略此行代码
        // xhr.setRequestHeader("token", token);
        //设置响应类型为 blob
        xhr.responseType = 'blob';
        //关键部分
        xhr.onload = function (e) {
            //如果请求执行完成且成功
            if (this.status == 200) {
                var blob = this.response;
                var filename = "我是文件名.xxx";//如123.xls
                var a = document.createElement('a');

                blob.type = "application/octet-stream";
                //创键临时url对象
                var url = URL.createObjectURL(blob);

                a.href = url;
                a.download=filename;
                // 开始下载
                a.click();
                //释放之前创建的URL对象
                window.URL.revokeObjectURL(url);
            }
        };
        //发送请求
        xhr.send();
}