Vue.js下载文件及判断上传文件类型，获取上传文件大小

 

目录

下载文件

方法一

1.跟后端童鞋确认交付的接口的response header设置了

2.修改axios请求的responseType为blob，以post请求为例：

3.请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

 方法二

1.下载图片效果图如下：

2. 下载例如docx文档效果图如下：

方法三

1.代码

判断上传文件类型

1.代码

获取上传文件大小

1.代码

---

 

下载文件

 

所用的浏览器:Google Chrome

 

方法一

 

功能：点击导出按钮，提交请求，下载excel文件；

 

1.跟后端童鞋确认交付的接口的response header设置了

以及返回了文件流。

 

2.修改axios请求的responseType为blob，以post请求为例：

 

axios({
    method: 'post',
    url: 'api/user/',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    responseType: 'blob'
}).then(response => {
    this.download(response)
}).catch((error) => {

})

 

3.请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

 

methods: {
    // 下载文件
    download (data) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'excel.xlsx')
        
        document.body.appendChild(link)
        link.click()
    }
}

 

上面代码来源与：https://www.cnblogs.com/yulj/p/8494465.html

 

 方法二

 

window.open(url)

 

1.下载图片效果图如下：

 

 

2. 下载例如docx文档效果图如下：

 

 

Window open() 方法请查看：http://www.runoob.com/jsref/met-win-open.html

 

方法三

 

1.代码

 

window.location.href = url;

 

 

判断上传文件类型

 

1.代码

 //判断上传文件类型
                    var filextension = that.formItem.de_enclosure.substring(that.formItem.de_enclosure.lastIndexOf("."), that.formItem.de_enclosure.length);
                    filextension = filextension.toLowerCase();

                    if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg')
                        && (filextension != '.png') && (filextension != '.bmp') && (filextension != '.txt')
                        && (filextension != '.docx') && (filextension != '.zip')) {
                        alert("对不起，系统仅支持jpg,gif,jpeg,png,bmp,docx,txt,zip格式的文件。");
                        return
                    }

 

上面代码中的that.formItem.de_enclosure是一个图片全部路径，例如：http://artmofang.oss-cn-beijing.aliyuncs.com/2018/1533281483000-hdiFCC.png

 

获取上传文件大小

 

1.代码

 

                var size = 0;
                size =files.target.files[0].size;//byte
                size = size / 1024;//kb
                size = (size / 1024).toFixed(3);//mb
                alert('上传文件大小为' + size + 'M');

 

上面代码files.target.files[0]是我们获取到的文件。toFixed是保留小数，例如如下代码：

 

var num =2.446242342;
num = num.toFixed(2);  // 输出结果为 2.45

 

JavaScript 保留小数具体请看：https://www.runoob.com/w3cnote/javascript-two-decimal.html