附件上傳vue組件封裝（一）

//父頁面部分

<attachment @newFileList="newFileList" :operationType="operationType" btnName="上傳PO/PI憑證" fileListType="1" :fileList="fileList" uploadBtnWidth="91"></attachment>

//父頁面組件引入

import attachment from 'base/publicComponents/attachment'

components:{

　　attachment

},

//父頁面接收回傳的附件列表

newFileList(reList,fileListType){

　　let vm = this;

　　if(fileListType=='1'){

　　　　vm.fileList1 = reList;

　　}else if(fileListType=='2'){

　　　　vm.fileList2 = reList;

　　}

},

//子組件部分
<template>
    <div class="item attachment attachmentNew">
        <span class="btnSpan" v-show="operationType<2" :title="btnName">
            <a id="btnName">{{btnName}}</a>
            <input type ="file" name="file" @change="uploadFileOnlyOne($event)" class="hiddenClass" :style="{width:uploadBtnWidth + 'px'}"/>
        </span>
        <ul class="fileContent">
            <li v-show="fileList.length>0">
                <div class="fileName">文件名</div>
                <div class="fileSize">文件大小</div>
                <div class="UploadingPerson">上傳人</div>
                <div class="fileTime">上傳時間</div>
                <div class="fileRemove" v-show="operationType<2">操做</div>
            </li>
            <li v-for="(item,index) in fileList">
                <div class="fileName"><a :href="prefixUrl+'/file/'+item.url" target="_blank" style="color:#78BC27" :title="item.fileName">{{item.fileName}}</a></div>
                <div class="fileSize">{{item.fileSize}}</div>
                <div class="UploadingPerson">{{item.userName}}</div>
                <div class="fileTime">{{item.createTime|dateDay}}</div>
                <div class="fileRemove" v-show="operationType<2" @click="delFile(item.id)"><span class="fa fa-trash-o"></span></div>
            </li>
        </ul>                 
    </div> 
</template>
<script> import { modal } from '../../common/js/modal.js' export default { props:{ //判斷是否有刪除操做功能，只有編輯和建立的時候纔有此功能
 operationType:{ default:0 }, //按鈕名稱與隱藏的input上傳附件按鈕的寬度要保持一致
 uploadBtnWidth:{ default:82 }, //上傳附件按鈕的名稱
 btnName:{ type: String, default:'' }, //同一頁面存在多個附件上傳按鈕，用來區分當前操做的按鈕是哪個；
 fileListType:{ type: String, default:'' }, //當前附件列表
 fileList:{ type: Array, default:[] }, }, data(){ return{ prefixUrl:$.getCookie('prefixUrl'), } }, methods:{ delFile(thisId){ let vm = this; var params = { id: thisId }; var url = '/file/delete'; $.ajaxSend(url, params).done(function (data) { if (data.code === '00000000') { vm.fileList.forEach((el,index) =>{ if(thisId===el.id){ vm.fileList.splice(index,1); } }); vm.$emit("newFileList",vm.fileList,vm.fileListType); } }) }, uploadFileOnlyOne(el){ let vm = this; var getFiles = el.target.files[0]; var fileName = getFiles.name; var fFN = fileName.substring(0,fileName.lastIndexOf('.')); if(/[@#\$%\^&\*]+/g.test(fFN)){ modal.error('文件名不能包含特殊符號！'); return false; } var fLN = fileName.substring(fileName.lastIndexOf('.')+1,fileName.length); if(fLN=='doc'||fLN=='docx'||fLN=='xls'||fLN=='xlsx'||fLN=='pdf'||fLN=='PDF'||fLN=='jpg'||fLN=='JPG'||fLN=='png'||fLN=='xlsx'||fLN=='xls'||fLN=='eml'){ }else{ modal.error('只容許上傳word/excel/pdf/圖片jpg,png/eml文件格式。'); return false; } var commonUrl = $.getCookie('prefixUrl'); let sessionId=$.getCookie('sessionId'); let areaCode=$.getCookie('areaCode'); let formData = new FormData(); formData.append('sessionId', sessionId); // formData.append('areaCode', areaCode);
 formData.append('file',getFiles); $.ajax({ url: commonUrl+'/file/upload', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (data) { if(data.payload.results.file.fileName){ vm.fileList.push(data.payload.results.file); vm.$emit("newFileList",vm.fileList,vm.fileListType); } }, error: function (data) { console.log('server error！'); } }); }, }, filters: { dateDay(input) { if(input){ var oDate = new Date(input); return oDate.getFullYear() + '-' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : '0' + (oDate.getMonth() + 1)) + '-' + (oDate.getDate() > 9 ? oDate.getDate() : '0' + oDate.getDate()); } }, }, mounted(){ //console.log(document.getElementById('btnName').offsetWidth);//獲取按鈕名稱的寬度
 } } </script>
<style scoped lang='stylus'> .attachmentNew .fileContent padding-left 16px li div display: inline-block .fileName width: 200px overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不換行，這樣超出一行的部分被截取，顯示... a:hover text-decoration underline .fileSize width: 80px .UploadingPerson width: 100px .fileTime width: 120px .fileRemove width: 40px span color #78BC27 &:hover cursor pointer .btnSpan margin 4px a padding 2px 4px border 1px solid #78BC27 border-radius 4px background #78BC27 color white font-size 12px .hiddenClass opacity: 0; position:relative; top:-20px; height:20px; </style>