Dropzone.js上传Base64字符串

时间:2018-01-11 18:54:35

标签: javascript jquery dropzone.js

我使用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);
    }
});

2 个答案:

答案 0 :(得分:1)

addedfile()中,您将获得该文件的 base64 。将录制的 base64 附加到sending()回调中的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);
    }

});

答案 1 :(得分:0)

迟迟未回答,但分享了我的解决方法。 使用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);
    },
});