<style type="text/css">
    #v_id_{{ name }} ul {
        margin-left: 0px;
        padding-left: 0px;
    }

    #v_id_{{ name }} .el-upload-dragger {
        width: auto;
        height: auto;
        border: none;
    }
</style>
<div id="v_id_{{ name }}">
    <input type="hidden" name="{{ name }}" v-model="{{ name }}">

    <el-upload ref="upload"
               :action="action"
               list-type="picture-card"
               :limit="1"
               :on-success="handleSuccess"
               :on-error="handleError"
               :on-preview="handlePictureCardPreview"
            {% if drag %}
               :drag="true"
            {% endif %}
               :file-list="file_list"
               :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
        <div v-if="!{{ name }}" slot="file" slot-scope="{file}">
        </div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="{{ name }}" alt="">
    </el-dialog>

</div>
<script type="text/javascript">

    var app_{{ name }} = new Vue({
        el: '#v_id_{{ name }}',
        data: {
            {% if not action %}
                action: '{% url 'sp:editor_upload' %}',
            {% else %}
                action: '{{ action }}',
            {% endif %}
            '{{ name }}': '{{ value }}',
            dialogVisible: false,
            file_list: []
        },
        mounted() {
            if (this.{{ name }} && this.{{ name }}.
            replace(/ /g, '') != ''
        )
            {
                this.$el.querySelector('.el-upload').style.display = 'none';
            }
            if (this.{{ name }} != '') {
                this.file_list.push({
                    name: '123.png',
                    url: this.{{ name }}
                })
            }
        },
        methods: {
            handleError(err) {
                this.$message({
                    message: '上传失败，请检查action相关配置',
                    type: 'error'
                });
            },
            handleSuccess(res, file) {
                if (res.success == 1) {
                    this.{{ name }} = res.url;
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                    this.$el.querySelector('.el-upload').style.display = 'none';
                } else {
                    this.$message({
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            handlePictureCardPreview() {
                this.dialogVisible = true;
            },
            handleRemove() {
                this.$nextTick(function () {
                    this.$el.querySelector('.el-upload').style.display = '';
                    this.{{ name }} = null
                });
            }
        }
    });
</script>