mz3/test/Test.vue

<template>
    <div>
        <el-upload
                :action="uploadUrl"
                :headers="headers"
                :file-list="urls"
                :limit="limit"
                :multiple="multiple"
                list-type="picture-card"
                :before-upload="beforeUnload"
                :on-exceed="exceed"
                :on-success="successUpload"
                :on-error="errorUpload">

            <i class="el-icon-plus"></i>

            <div slot="file" slot-scope="scope">
                <el-image
                        :src="scope.file.url" alt=""
                        @click="handlePictureCardPreview(scope)"
                        :preview-src-list="srcList">
                </el-image>
            </div>
        </el-upload>
    </div>
</template>

<script>
    import lrz from 'lrz'

    export default {
        data() {
            return {
                limit: 10,
                multiple: true,
                uploadUrl: this.serverUrl + '/sys/user/upload',
                headers: {
                    'sessionId': this.storageUtil.read("sessionId")
                },
                urls: [{url: this.serverUrl +"/public/uploads/record1572577377866.png"},
                    {url: this.serverUrl +"/public/uploads/record1572577377866.png"}],
                srcList: []
            };
        },
        methods: {
            handleRemove(file, fileList) {
                // console.log("删除", file, fileList);
            },
            handlePictureCardPreview(file) {
                // console.log("预览", file);
            },
            beforeUnload(file) {
                lrz(file).then(rst => {
                        const isLt2M = rst.fileLen / 1024 / 1024 < 2 && rst.fileLen > 0;
                        if (!isLt2M) {
                            this.$message.error('上传图片太大，请重新选择!');
                            return;
                        }
                        file = rst.file;
                       // console.log('图',rst);
                    }
                ).catch(error => {
                        that.$message.error(error.message);
                    }
                );
                // console.log("开始上传", file);
            },
            successUpload(response, file, fileList) {
                this.urls.push(response.data);
                console.log("successUpload", response, file, fileList);
            },
            errorUpload(response, file, fileList) {
                console.log("errorUpload", response, file, fileList);
            },
            exceed(files, fileList) {
                console.log('超过', files, fileList)
            }
        }
    }
</script>

<style scoped>

</style>