使用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的下載文件組件，是本身經常使用的一種，若是有更好的方法歡迎你們踊躍指出

 

下面是個人公衆號，歡迎你們關注，能夠一塊兒學習一塊兒進步：