文件拖拽上传实例

dragFile() {
    var self = this;
    this.$nextTick(function() {
        var dropzone = document.getElementById('dropzone');
        dropzone.ondragover = function(ev) {
            //阻止浏览器默认打开文件的操作
            ev.preventDefault();
            this.className = 'over';
        }
        dropzone.ondragleave = function() {
            this.className = '';
        }
        dropzone.ondrop = function(ev) {
            this.className = '';
            //阻止浏览器默认打开文件的操作
            ev.preventDefault();
            //表单上传文件
            self.uploadFile(ev, "drag");
        }
    })
},
uploadFile(e, type) {
    var self = this;
    var el;
    if (type == "drag") {
        el = e.dataTransfer
    } else if (type == "clc") {
        el = e.target
    }
    var formData = new FormData();
    formData.append("file", el.files[0]);
    formData.append("fileName", el.files[0].name);
    let name = el.files[0].name.split(".");
    // console.log(name[name.length - 1]);
    // 如果不是excel文件格式的文件，报错
    if (name[name.length - 1] != 'xlsx' && name[name.length - 1] != 'xls') {
        self.$message({
            showClose: true,
            message: "只能上传excel文件",
            type: "error"
        });
        return;
    }
    if (type == "drag") {
        this.recoldClick(101, "拖动上传")
    } else if (type == "clc") {
        this.recoldClick(100, "上传按钮")
    }
    AppInstance.loading = true;
    $.ajax({
        url: API.upload(),
        type: "POST",
        data: formData,
        dataType: "json",
        processData: false, // 不处理数据
        contentType: false, // 不设置内容类型
        success: function(res, textStatus, jqXhr) {
            if (jqXhr.getResponseHeader("loginurl")) {
                window.location.href = jqXhr.getResponseHeader("loginurl");
                AppInstance.loading = false;
            }
            if (res.success) {
                self.uploadSuccess(res);
            } else {
                self.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                });
                AppInstance.loading = false;
            }
        },
        error: function(jqXhr) {
            // 跳转至登陆
            if (jqXhr.getResponseHeader("loginurl")) {
                window.location.href = jqXhr.getResponseHeader("loginurl");
            }
            self.$message({
                showClose: true,
                message: "连接超时，请检查网络",
                type: "error"
            });
            AppInstance.loading = false;
        }
    });
    el.value = "";
},