vue-puload.js

標籤：[]   elf   pac   tool   pptx   隱藏   turn   white   檔案格式   

define(function(require,exports){        /**     * direction :Top Left Top Right Top Center right-start ****     * tipShow: 顯示狀態 預設隱藏     */    exports.vtip = {        template:‘<div v-if="tipShow" class="fade-transition ivu-tooltip-popper" :x-placement="direction"  :style="{top: \‘40px\‘,right:rightDistance}">                <div class="ivu-tooltip-content">                <div class="ivu-tooltip-arrow"></div>                <div class="ivu-tooltip-inner" style="white-space: normal">{{message || "---"}}</div>            </div>        </div>‘,        props:{             direction:‘‘,             tipShow:‘‘,             message:‘‘,             rightDistance:{                 "type": String,                 "default": "0"             }        }    }        //上傳模板    var template_vUpload =  ‘<div>                                <Upload  v-ref:upload :action="uploadUrl" multiple  :before-upload="handleBeforeUpload"                                     :on-success="handleSuccess" :format="[\‘ppt\‘,\‘pptx\‘,\‘PPT\‘,\‘PPTX\‘,\‘doc\‘,\‘DOC\‘,\‘docx\‘,\‘DOCX\‘,\‘xls\‘,\‘xlsx\‘,\‘XLS\‘,\‘XLSX\‘,\‘pdf\‘,\‘PDF\‘,\‘txt\‘,\‘TXT\‘]"                                     :on-format-error="handleFormatError"  :max-size="51200" :on-exceeded-size="handleMaxSize"  :show-upload-list="false" style="width:100px;" :accept="\‘.ppt,.pptx,.PPT,.PPTX,.doc,.DOC,.docx,.DOCX,.xls,.xlsx,.XLS,.XLSX,.pdf,.PDF,.txt,.TXT\‘">                                    <i-button :type="fileButton" :size="fileButtonSize"  :icon="fileIcon">{{fileText}}</i-button>                                </Upload>                                <ul class="ivu-upload-list" v-if="!nofileList">                                    <li class="ivu-upload-list-file ivu-upload-list-file-finish" v-for="item in uploadList">                                          <div  v-if="item.status === \‘finished\‘">                                           <span>                                               <i class="ivu-icon ivu-icon-document-text"><nobr>{{item.name}}</nobr></i>                                           </span>                                            <i class="ivu-upload-list-remove ivu-icon ivu-icon-ios-close-empty" @click="handleRemove(item)"></i>                                          </div>                                          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>                                      </li>                                  </ul>                                <div class="ivu-message" v-if="demanIfShow">                                    <div class="ivu-message-notice">                                             <div class="ivu-message-notice-content">                                                 <div class="ivu-message-notice-content-text">                                                    <div class="ivu-message-custom-content ivu-message-loading">                                                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>                                                        <span>載入中...</span>                                                    </div>                                                </div>                                             </div>                                      </div>                                </div>                            </div>‘;    /**     * upload 組件     * uploadUrl : 上傳地址(String)     * pathData  ： 檔案清單資料(Array)     * nofileList: 是否顯示列表 (True)     * fileText : 上傳按鈕文字(String預設是上傳按鈕)     * fileIcon : 按鈕樣式(String預設是上傳表徵圖)     * fileButton: 上傳按鈕類型(String預設是ghost)     * fileButtonSize ： 上傳按鈕顯示尺寸(String預設為空白)     */    exports.vUpload = {            template:template_vUpload,            data:function(){                return {                    fileUpList:[],                    demanIfShow:false                }            },            methods:{                getUploadList:function(){                     var self = this;                     self.fileUpList = self.pathData;                        //資料群組合 將fileUpList 拼到 $refs.upload.fileList數組中                      self.$refs.upload.fileList = [];//插入之前先清空                      for(var j=0; j< self.fileUpList.length; j++){                         var obj = {                              name:self.fileUpList[j],                              status:‘finished‘                         };                         self.$refs.upload.fileList.push(obj);                     }                 },                 handleBeforeUpload:function(){                     var self = this;                     self.demanIfShow = true;                 },                 handleSuccess:function(res, file) {//上傳成功                     var self = this;                     self.demanIfShow = false;                     file.name = res.result;                     if(Object.prototype.toString.call(res.result) === ‘[object Array]‘){//返回是否為空白數組                         self.fileUpList = res.result;                     }else{                         self.fileUpList.push(res.result);                         if(res.successSign){                             self.$Message.success(res.message)                         }else{                             self.$Message.error(res.message);                         }                     }                      //驗證調用                      self.checkFormValidate();                 },                 handleFormatError:function(file) {//上傳失敗                     var self = this;                     self.demanIfShow = true;                     self.$Message.config({                          duration: 3                     });                     self.$Notice.warning({                         title: ‘檔案格式不正確‘,                         desc: ‘檔案 ‘ + file.name + ‘ 格式不正確，請上傳 ppt,pptx,PPT,PPTX,doc,DOC,docx,DOCX,xls,xlsx,XLS,XLSX,pdf,PDF,txt,TXT格式的的檔案。‘                     });                 },                 handleRemove:function(parm){//移除檔案                       var self = this;                       //fileUpList 刪除傳過去的資料                       self.fileUpList.splice(self.fileUpList.indexOf(parm), 1);                         //upload 介面刪除資料                      var fileList = this.$refs.upload.fileList;                      self.$refs.upload.fileList.splice(fileList.indexOf(parm), 1);                      //移除檔案 驗證調用                        self.checkFormValidate();                 },                 handleMaxSize:function(file){                     var self = this;                     self.$Notice.warning({                         title: ‘超出檔案大小限制‘,                         desc: ‘檔案 ‘ + file.name + ‘ 太大，不能超過 50M。‘                     });                 },                 checkFormValidate:function(){//調用父組件驗證                     var self = this;                     if(self.parentName){                         self.$dispatch(‘handleIt‘,self.fileUpList,self.parentName);                     }else{                         self.$dispatch(‘handleIt‘,self.fileUpList)                     }                 }            },            computed:{                uploadList:function() {                    var self = this;                    return self.$refs.upload ? self.$refs.upload.fileList : [];                }            },            props:{                uploadUrl:{                  "type": String,                  "default": ""                },                pathData:{                     "type": Array,                     "default": []                },                nofileList:{                     "type": Boolean,                     "default": false                },                fileText:{                    "type": String,                    "default": "上傳檔案"                },                fileIcon:{                    "type": String,                    "default": "ios-cloud-upload-outline"                },                fileButton:{                    "type": String,                    "default": "ghost"                },                fileButtonSize:{                    "type": String,                    "default": ""                },                parentName:{                    "type": String,                    "default": ""                }            },             ready:function(){                 var self = this;                 self.getUploadList();             }        }})

 

vue-puload.js