ngds/frontendEle/src/views/user/id-card.vue_bak

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-upload
                    class="id-card-uploader"
                    v-show="uploaderShow"
                    :action="requestUrl"
                    name="file"
                    :headers="headers"
                    :data="formData"
                    :show-file-list="false"
                    :before-upload="handleBefore"
                    :on-success="handleSuccess"
                    :disabled="uploaderDisabled"
                    v-loading="uploaderLoading">
                <img v-if="imageUrl" :src="imageUrl" class="id-card">
                <i v-else class="el-icon-plus id-card-uploader-icon"></i>
            </el-upload>
            <div class="id-card-show">
                <img :src="imageUrl" alt="" width="480">
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {REQUEST_URL, ACCESS_TOKEN_PREFIX} from '@/utils/config';
    import network from './../../utils/network';
    import userInfo from '@/utils/userInfo';
    import tool from './../../utils/tool';
    import store from '@/utils/vuexStore';

    export default {
        name: "user_index",
        mounted(){
            this.getData();
        },
        data(){
            return {
                uploaderShow: true,
                imageUrl : '',
                loading: false,
                uploaderLoading: false,
                formData: {
                    'uploadToken': '',
                },
                requestUrl: `${REQUEST_URL}user/id-card`,
                headers:{
                    'Device-Type':'pc',
                    'Suppress-Response-Code': '1',
                    'Authorization' : ACCESS_TOKEN_PREFIX+userInfo.accessToken(),
                },
                uploaderDisabled: false,
            }
        },
        methods: {
            handleBefore(){
                this.uploaderLoading = true;
            },
            handleSuccess(response, file){
                if(response.success){
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.uploaderShow = false;
                    this.uploaderDisabled = true;
                    this.uploaderLoading = false;
                } else {
                    this.$message({
                        message: response.data.message,
                        type: 'warning'
                    });
                    this.uploaderLoading = false;
                }
            },
            getData(){
                network.getData('user/id-card').then(response=>{
                    if(response.ID_IMAGE){
                        this.imageUrl = response.ID_IMAGE;
                        this.uploaderShow = false;
                        this.uploaderDisabled = true;
                    } else {
                        this.formData.uploadToken = response;
                    }
                    this.loading = false;
                });
            }
        }
    }

</script>

<style scoped>
    .id-card-uploader {
        width: 480px;
        height: 320px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .id-card-uploader:hover {
        border-color: #409EFF;
    }
    .id-card-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 480px;
        height: 320px;
        line-height: 320px;
        text-align: center;
    }
    .id-card {
        width: 480px;
        height: 320px;
        display: block;
    }
</style>