Javascript Dropzone.js上载Base64字符串

我正在使用一个javascript插件Dropzone.js来帮助我的上传在用户看来是无缝的。这也是我的公司想要使用的，所以在这件事上我别无选择

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

ondrop

方法，但失败得很惨

我调用dropzone的函数

$("#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);
    }
});

在

addedfile（）

中，您将获得文件的base64。将录制的base64追加到

sending（）

callback中的formData

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);
    }

});

在

addedfile（）

中，您将获得文件的base64。将录制的base64追加到

sending（）

callback中的formData

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);
    }

});

---

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);
    },
});

---

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);
    },
});

---

您的服务器端可以进行编码吗？@DanielA.White，不，我需要在前端进行编码才能传递到后端。如果您的服务器不可以，您可以在前端使用一些库进行编码。@Phix我不能使用其他库。我正在尝试使用此插件上载图像。您的服务器端可以进行编码吗？@DanielA.White，不，我需要在前端进行编码才能传递到后端。如果您的服务器不可以，您可以在前端使用库进行编码。@Phix我无法使用其他库。我正在尝试使用这个插件上传图片。我只是在我的成功功能之前添加了这个插件，现在当图片被拖入时，它不再出现在窗口中。我还收到了相同的“不支持的媒体类型”消息，表明它没有转换。您是否将参数设置为“acceptedFiles”属性？给它一些值，比如“acceptedFiles:image/*，application/pdf”[假设您支持所有类型的图像和pdf文件]我没有acceptedFiles参数，因为这需要接受所有内容，包括js文件或word文档。这是否需要一个acceptFiles字段才能工作？我只是尝试放入一个acceptedFiles进行测试，但它似乎没有做任何事情。进一步看，似乎在实际加载此函数之前，图像实际上已上载。我将更新我的问题以添加此函数。我只是在成功函数之前添加了此函数，现在图像在拖动时不再显示在窗口中。我还收到了相同的“不支持的媒体类型”消息，表明它没有转换。您是否将参数设置为“acceptedFiles”属性？给它一些值，比如“acceptedFiles:image/*，application/pdf”[假设您支持所有类型的图像和pdf文件]我没有acceptedFiles参数，因为这需要接受所有内容，包括js文件或word文档。这是否需要一个acceptFiles字段才能工作？我只是尝试放入一个acceptedFiles进行测试，但它似乎没有做任何事情。进一步看，似乎在实际加载此函数之前，图像实际上已上载。我将更新我的问题以添加此函数。