拖放区.js上传 Base64 字符串

Question

我正在使用javascript插件Dropzone.js来帮助使我的上传对用户来说似乎是无缝的。这也是我公司想要使用的，所以我别无选择！

我遇到了一个问题，需要将图像或文档转换为 Base64 以保存到数据库。有没有简单的方法可以做到这一点？我尝试过ondrop的方法，但我惨败了。

调用拖放区的函数

$("#attachments").dropzone({
    maxFiles: 2000,
    url: baseUrl + 'rest/insert',
    addedfile: function(file) {
      var base64 = ''
      var reader = new FileReader();
      reader.onload = function(event) {
        base64 = event.target.result;
        console.log(base64)
      };
      reader.readAsDataURL(file);
     },
    success: function(file, response) {
        console.log(response);
    }
});

Answer 1

在addedfile()中，您将获得文件的base64。将记录的 base64 附加到 formData sending()回调。

Dropzone.autoDiscover = false;
var base64 = '';
$("#attachments").dropzone({
    url: "/",
    autoProcessQueue: false,
    maxFiles: 2000,
    sending: function(file, xhr, formData){
        formData.append("base64", base64);
    },
    addedfile: function(file) {
        var _this=this,
            reader = new FileReader();
        reader.onload = function(event) {
            base64 = event.target.result;
            _this.processQueue()
        };
        reader.readAsDataURL(file);
    },
    success: function(file, response) {
        console.log('success:', response);
    }
});

Answer 2

Lil 回答得很晚，但分享了我是如何解决的。使用accept而不是addedfile

myDropZone = new Dropzone("div#dropZoneContainer", {
    url: "/",
    autoProcessQueue: false,
    maxFiles: 1,
    accept: function (file) {
        reader = new FileReader();
        reader.onload = function (event) {
            imageData = event.target.result;
            console.log(imageData);
        };
        reader.readAsDataURL(file);
    },
});