安裝

npm i vue-upload-component

使用

<template>
    <div class="example-drag">
        <div :class="type === 'small' ? 'upload-small' : 'upload-big'">
            <div class="example-btn">
                <file-upload
                    class="btn btn-primary"
                    post-action="/upload/post"
                    :multiple="true"
                    :drop="true"
                    :drop-directory="true"
                    :size="size"
                    @input-filter="inputFilter"
                    v-model="files"
                    ref="upload"
                >
                    <div
                        class="mx-auto"
                        :class="type === 'small' ? 'my-3' : 'mt-14'"
                    >
                        <v-icon
                            :class="type === 'small' ? 'mb-5' : 'mb-10'"
                            size="35"
                            color="#3073E1"
                        >
                            mdi-inbox
                        </v-icon>
                        <p :class="type === 'small' ? 'mb-2' : 'mb-6'">
                            ここにファイルをドロップまたは
                        </p>
                        <v-btn color="primary" height="40"
                            >ファイルを選択</v-btn
                        >
                    </div>
                </file-upload>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import FileUpload from 'vue-upload-component';
import imgDiv from '~/components/pageCom/imgDiv.vue';

@Component({
    name: 'dragUpload',
    components: {
        FileUpload,
        imgDiv
    }
})
export default class DragUpload extends Vue {
    @Prop({ type: String, default: 'small', required: false })
    private type: any;
    @Prop({ type: Number, default: 0, required: false })
    private size: any;
    @Watch('files')
    do() {
        this.returnList();
    }
    @Emit('getList')
    returnList() {
        return this.files;
    }
    mounted() {
        console.log(this.type);
    }
    private files: any = [];

    public getData() {
        return this.files;
    }

    private inputFilter(
        newFile: { name: string; file: any; url: string },
        oldFile: { file: any },
        prevent: () => any
    ) {
        if (newFile && !oldFile) {
            if (!/\.(gif|jpg|jpeg|png|webp)$/i.test(newFile.name)) {
                console.log('文件格式不對(duì)');
                return prevent();
            }
            if (this.size && newFile.file.size > this.size) {
                console.log('文件超大');
                return prevent();
            }
        }
        if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
            newFile.url = '';
            let URL = window.URL || window.webkitURL;

            if (URL && URL.createObjectURL) {
                newFile.url = URL.createObjectURL(newFile.file);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.example-drag .upload-small {
    width: 300px;
    height: 150px;
    background-color: #fafafa;
    text-align: center;
    border: 1px solid #d9d9d9;
}
.example-drag .upload-big {
    width: 100%;
    height: 281px;
    background-color: #fafafa;
    text-align: center;
    border: 1px solid #d9d9d9;
}
.example-drag .drop-active {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 9999;
    opacity: 0.6;
    text-align: center;
    background: #000;
}
.example-drag .drop-active h3 {
    margin: -0.5em 0 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    padding: 0;
}
.mx-auto {
    text-align: center;
}
</style>

效果圖

拖拽上傳.jpg

自己封裝回顯圖片

<template>
    <div class="row-min-height">
        <div
            class="row-inline mr-5"
            v-for="(item, index) in imgList"
            :key="index"
        >
            <div class="m-a-6 mr-1">
                <img class="w-h-48" :src="item.src || item.url" />
            </div>
            <div>
                <p class="imgName mt-2 mb-1">{{ item.name }}</p>
                <p class="imgSize">{{ washSize(item.size) }}</p>
            </div>
            <div class="fl-r-m-17 pt-5">
                <v-icon @click="deleteImg(index)">mdi-close</v-icon>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { renderSize } from '~/utils/tool';
@Component({
    name: 'imgDiv'
})
export default class imgDiv extends Vue {
    @Prop({ type: Array, default: [], required: true })
    private imgList: any;

    private deleteImg(index: number) {
        this.imgList.splice(index, 1);
    }
    private washSize(size: string) {
        return renderSize(size);
    }
}
</script>
<style lang="scss" scoped>
.row-inline {
    display: inline-block;
    width: 308px;
    height: 60px;
    background-color: #fafafa;
}
.row-inline div {
    vertical-align: middle;
    display: inline-block;
}

.imgName {
    font-family: Noto Sans CJK JP;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: #212121;
}
.imgSize {
    font-family: Noto Sans CJK JP;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    color: #9e9e9e;
}
.row-min-height {
    min-height: 64px;
}
</style>

效果圖

圖片回顯.jpg

文件大小格式化

export function renderSize(value: string) {
    if (!value || value === '') {
        return '0 Bytes';
    }
    const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    let index = 0;
    const srcsize = parseFloat(value);

    index = Math.floor(Math.log(srcsize) / Math.log(1024));
    const size = srcsize / Math.pow(1024, index);

    const res = size.toFixed(2);

    return res + unitArr[index];
}