附件上传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>