使用vue+iview实现上传文件及经常使用的下载文件的方法

首先说明一下，咱们此次主要用的仍是iview的upload上传组件，下面直接上代码

<Upload 
            ref="upload"
            multiple='true'   //是否支持多文件上传
            :show-upload-list="true"  //显示上传的文件
            :before-upload="handleUpload" //上传前须要的一些操做
            :data="uploadFile"　　//上传的文件保存的地方
            :on-success="uploadSuccess"   //上传成功时调用的方法
            :headers='{"Authorization": session}' //这里是设置的请求头token
            :action="actionUrl" //这是上传时的后台接口
        >
            选择Excel文件：<Button icon="ios-cloud-upload-outline">选择上传文件</Button>
        </Upload>
        <!-- <Button type="primary" @click="clear" >清空上传记录</Button> //这里是手动上传的时候 清空以前的上传记录 或者点击的错误文件-->
        <!-- <Button type="primary" @click="upload" >点击上传文件</Button> //若是不设置则为自动上传，这里能够设置手动上传文件-->

下面是上传时咱们须要调用的一些方法

        importExcel(url){
                this.modalImport = true;
                this.$refs.upload.clearFiles();//清除上次上传记录
                this.file = [];
                this.uploadFile = [];
            },
            uploadSuccess(response, file, fileList){
                this.$Message.info(response.msg);
                // this.modalImport = false
                debugger
                this.init(0, 20);
            },
            clear(){
                this.$refs.upload.clearFiles();//清除上次上传记录
            },
            handleUpload (file) { // 上传文件前的事件钩子
                
                // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操做
                let keyID = Math.random().toString().substr(2);
                file['keyID'] = keyID;
                // 保存文件到总展现文件数据里
                this.file.push(file);
                // 保存文件到须要上传的文件数组里
                this.uploadFile.push(file)
                // 返回 falsa 中止自动上传 咱们须要手动上传
                //若是须要手动上传文件，须要把这里注释放开并放开上面代码块中的被注释的两个按钮，就能够进行手动上传了
                //return false
            },
            upload () { // 上传文件
                for (let i = 0; i < this.uploadFile.length; i++) {
                    let item = this.file[i]
                    this.$refs.upload.post(item);
                }
                
            },    

上传文件大概就是这样了，关键的代码部分也给出了注释，但愿能帮到你们。

 

 

 

既然有了上传文件，那就顺便把下载文件的也一块儿说了吧 ！其实下载文件比较简单点，直接看代码吧！！！

exportExcel(url){
                if(this.data.length == 0){
                    this.$Message.info('当前列表暂无数据！')
                    return;
                }
                let url1 = this.GLOBAL.BASE_URL + url,
                sessionId = Cookies.get('status'),
                form = $('<form></form>').attr('action',url1).attr('method','post');
                form.append($('<input></input>').attr('type','hidden').attr('name','Authorization').attr('value',sessionId));
                form.appendTo('body').submit().remove();
            },

下载文件主要就是请求头的设置，这里不是iview的下载文件组件，是本身经常使用的一种，若是有更好的方法欢迎你们踊跃指出

 

下面是个人公众号，欢迎你们关注，能够一块儿学习一块儿进步：