圖片上傳（3）（組件 -- 圖片大小寬高限制）base64圖片寬高讀取

1.上傳組件（可上傳多個文件）

<template>
    <div class="attachmentN">
        <span class="btnSpan" v-show="operationType<2" :title="btnName" :class="{'active': showButton === false}">
            <a id="btnName" class="btnNameA" v-show='showButton'>{{btnName}}</a>
            <!-- :style="{width:uploadBtnWidth + 'px'}" -->
            <input type ="file" name="file"  v-show='showButton' @change="uploadFileOnlyOne($event)" class="hiddenClass" />
        </span>
        <span v-show="operationType<2&&attachmentContent">({{attachmentContent}})</span>
        <ul class="fileContent"  :class="{'active': showButton === false}">
            <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"  :class="{'active': showButton === false}">操作</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 v-show='showButton' class="iconfont icon-shanchu"></span></div>
            </li>
        </ul>
    </div>
</template>
<script>
import { modal } from '../../common/js/modal.js'
export default {
    props:{
        //判斷是否有刪除操作功能，只有編輯和創建的時候才有此功能
        operationType:{
            default:0
        },
        showButton: {
          type: Boolean,
          default: true
        },
        //按鈕名稱與隱藏的input上傳附件按鈕的寬度要保持一致
        uploadBtnWidth:{
            default:82
        },
        //上傳附件按鈕的名稱
        btnName:{
            type: String,
            default:''
        },
        //上傳的附件添加類型備注
        attachmentContent:{
            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];
            if (getFiles.size > 20 * 1024 * 1024) {
              modal.error('上傳文件尺寸不能大於20M');
              return
            }
            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'>
.attachmentN
    padding-top 4px
    .fileContent
        padding-left 6px
        padding-top 6px
        &.active
            margin-bottom 0px
        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
                &.active
                    display none
                span
                    color #78BC27
                &:hover
                    cursor pointer
.btnSpan
    margin 4px
    position:relative;
    &.active
        display none
    a
        padding 4px 4px
        border 1px solid #78BC27
        border-radius 4px
        background #78BC27
        color white
        font-size 12px
.hiddenClass
    opacity: 0;
    position: absolute;
    top 0
    left 0
    width 100%




</style>

2.單個文件上傳以及圖片尺寸的限制

      previewFile(e){
          let vm = this;
        //  這里用的事件是change就是
        let file=e.target.files[0];
        vm.flagFile=file;
        let reader=new FileReader();
        if(file){
            reader.readAsDataURL(file);
        }
        reader.addEventListener('load',()=>{
            // this.$refs.imgUpLoad.src=reader.result;
            var img = new Image();
            img.src = reader.result;
            img.onload = function(){
                if(img.width!=210||(img.height!=210)){
                    console.log('width:'+img.width+',height:'+img.height);
                    Message('請上傳尺寸大小為210*210的圖片')
                    return;
                }
                vm._postImg(e);
            };            // 同時上傳圖片.
        },false);
      },
    //  選擇圖片的時候同時提交圖片。  
      _postImg(){
         //   上傳圖片。  直接FormData的是form表單，一個input存session值，一個存文件
         let sessionId=$.getCookie('sessionId');
         var areaCode=$.getCookie('areaCode');         
         this.$refs.inputText.value=sessionId;
         this.$refs.inputTextArea.value=areaCode; 
         var commonUrl = $.getCookie('prefixUrl');
         let fdata=new FormData($('#uploadForm')[0]);
         $.ajax({
            url: commonUrl+'/file/upload',
            type: 'POST',
            data: fdata,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success:(data)=>{
                // 獲取上傳的id;
                this.attachmentId=data.payload.results.file.id;
                this.imgsrc=data.payload.results.file.url;
            },
            error:(err)=>{
              
            } 
         })
      },