baoshi-was/resources/views/transport/waybill/_batchUploadImg.blade.php

<div class="modal fade" tabindex="-1" role="dialog" id="batchUploadImg">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div class="pull-left ml-2 small text-primary">
                    选择文件时使用SHIFT键或CTRL键可多选
                </div>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <label hidden><input type="file" @change="uploadFiles($event)" multiple="multiple" id="uploadImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"></label>
                <div class="container-fluid">
                    <div class="text-center small row mb-1" v-if="batchUploadError.length>0">
                        <div class="col-3 text-danger">部分上传失败：</div>
                        <div class="col-8">
                            <b v-for="err in batchUploadError">@{{ err }}<br></b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8 text-center offset-2 border border-2 rounded" style="min-height: 100px;cursor: pointer"
                        @click="selectedFile()" v-if="images.length<1">
                            <div class="h1 text-secondary mt-3">
                                <span class="fa fa-plus"></span>
                            </div>
                        </div>
                        <div class="col-3 border border-2 rounded" v-for="(img,i) in images">
                            <div class="w-100 row m-1 h-25">
                                <div class="text-center small col-9">
                                    <span class="text-wrap">@{{ img.name }}(<span class="text-info">@{{ img.size | size }}</span>)</span>
                                </div>
                                <span class="col-3 h4 cursor-pointer text-danger font-weight-bold h-25" @click="delTempImg(i)"> &times;</span>
                            </div>
                            <div class="w-100 m-0 text-center h-50 overflow-hidden">
                                <img class="img-fluid" :src="img.src" alt="img.name"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info text-white mr-1" @click="selectedFile()" v-if="images.length>0">
                    <span class="fa fa-image"></span>
                    继续添加</button>
                <button class="btn btn-success" @click="batchUploadImages()">开始上传</button>
            </div>
        </div>
    </div>
</div>