CSS样式

.fileBox{margin:20px;}
.fileInputP{display:inline-block;width:200px;height:30px;border-radius:5px;overflow:hidden;position:relative;}
.fileInputP i{display:inline-block;width:200px;height:30px;color:#fff;background:#7d8f33;text-align:center;line-height:30px;}
#fileInput{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;}
#fileSpan{display:inline-block;width:660px;height:150px;border:2px dashed #ccc;text-align:center;line-height:150px;}

HTML代码

<div class="form-group">
    <label for="exampleFormControlInput1">选择图片</label>
    <input id="file" name="image[]" type="file" class="form-control-file" id="exampleFormControlInput1" multiple>
</div>
<div class="form-group fileBox" id="container" @drop="drop" @dragenter="dragenter" @dragover="dragover"> <span id="fileSpan" class="vm">图片拖拽到上传区</span>
    <div class="mask"></div>
</div>

正常提交操作

var file_datas = $('#file').prop('files');
$.ajaxSetup({
    async: false
});
var file_data = file_datas[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
    url: 'upload_image_url',
    dataType: 'json', 
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,
    type: 'post',
    success: function(response) {
        if (response.code == 0) {
              alert('图片上传成功');
        } else {
            alert('图片上传失败，请重试！');
        }
    }
})

拖拽上传

// 监听drop事件，防止浏览器中打开客户端图片
document.ondragover = function(e) {
    // 阻止ondragover的默认行为（触发ondragleave)
    e.preventDefault();
};
document.ondrop = function(e) {
    // 阻止ondrop的默认行为(触发在当前窗口打开客户端图片)
    e.preventDefault();
};

dragenter(el) {
    el.stopPropagation();
    el.preventDefault();
},
dragover(el) {
    el.stopPropagation();
    el.preventDefault();
},
drop(el) {
    var that = this;
    // el.stopPropagation();
    // el.preventDefault();
    var f0 = el.dataTransfer.files[0];
    // // 创建文件读取器
    var reader = new FileReader();
    // 读取指定文件中的内容，作为"数据URL"
    reader.readAsDataURL(f0);
    reader.onload = function() {
        console.log("客户端数据读取完成");
        // 读取的结果(格式为数据编码)
        // console.log(reader.result)
        let file = that.Base64toFile(reader.result, 'image.jpg');
        var form_data = new FormData();
        form_data.append("file", file);
        $.ajaxSetup({
            async: false
        });
        $.ajax({
            url: 'upload_image_url',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response) {
                if (response.code == 0) {
                    alert('图片上传成功');
                } else {
                    alert('图片上传失败，请重试！');
                }
            }
        })
    }
},
//将base64转换为文件
Base64toFile: function(dataurl, filename) { 
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}

拖拽上传可以简化成如下  上面的操作用于先将file转换成base64 可以用于压缩上传或者在线显示图片

drop(el) {
    var that = this;
    var f0 = el.dataTransfer.files[0];
    var form_data = new FormData();
    form_data.append("file", f0);
    $.ajaxSetup({
        async: false
    });
    $.ajax({
        url: 'upload_image_url',
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        success: function(response) {
            if (response.code == 0) {
                doPost(response.data.src);
            } else {
                alert('图片上传失败，请重试！');
            }
        }
    })
}

拖拽上传的核心

捕获拖拽事件 获取文件数据 将base64的资源转换成文件格式上传

采用VUE开发不能直接用原生的捕获事件 否则无法监听。下面演示如何将上传的图片转换成图片显示在网页

// 监听drop事件，防止浏览器中打开客户端图片
document.ondragover = function(e) {
    e.preventDefault();
};
document.ondrop = function(e) {
    e.preventDefault();
};
// 若图片释放此元素上方，则需要在其中显示此图片
container.ondragover = function(e) {
    e.preventDefault();
}
container.ondrop = function(e) {
    var f0 = e.dataTransfer.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(f0);
    reader.onload = function() {
        console.log("客户端数据读取完成");
        // 读取的结果(格式为数据编码)
        console.log(reader.result)
        var img = new Image();
        img.src = reader.result;
        container.appendChild(img);
        // 用ajax将读出的图片结果提交给服务端
    }
}