Question

我有一个带有dropzone的表单，并且可以将base64发送到数据库中，但是该表单会超时，具体取决于文件大小（即使是3.8MB也可以）。

我正在尝试压缩base64，以便表单提交速度更快，然后在将其从数据库中拉回时对其进行解压缩。

我尝试compressJS失败。我下面的示例使用compressJS（https://github.com/xkeshi/image-compressor/blob/master/README.md#getting-started）

当前通过附带的代码遇到这两个错误：

“第一个参数必须是File或Blob对象。” “错误：未提供URL。”

     <script src="../scripts/jquery.min.js"></script>
     <script src="../scripts/bootstrap.min.js"></script>
     <script src="../scripts/function.js"></script>
     <script src="../scripts/dropzone.js"></script>
     <script src="../scripts/base64-string.js"></script>
     <script src="../scripts/compressor.common.js"></script>
     <script type="text/javascript" src="../scripts/jquery.ui.touch-punch.min.js"></script>


<form action="dropzone-action.cfm" enctype="multipart/form-data" method="POST" name="theform" id="theform" onSubmit="return Valids()">
    <div class="row">

            <div class="col-lg-3"><label>Photo 1* (4MB or less)</label>
                <div class="well"> 
                    <div class="form-group">                    
                        <div class="fallback">
                            <div class="dropzone" id="myDropzone1" name="myDropzone1"></div>
                        </div>                        
                         <input type="hidden" name="data_image1" id="data_image1" value="">
                    </div>
               </div>
            </div>
          <input id="submit" name="submit" type="submit" value="Send Your Profile">    
    </div>
</form>

Javascript：


 const imageCompressor = new Compressor();
       imageCompressor.compress(file, {
       checkOrientation: true,
       maxWidth: 1200,
       quality: 0.6,
       convertSize: 0,
        })
  .then((result) => {
   console.log("Compressed:::", result);
     })
   .catch((err) => {
    console.log(err);
 });


$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#myDropzone1").dropzone({
        url: "dropzone-action.cfm",
        maxFilesize: 4,
        maxThumbnailFilesize: 4,
        acceptedFiles: "image/jpeg,image/jpg,image/gif,image/png",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            let fileReader = new FileReader();

            fileReader.readAsDataURL(file);
            fileReader.onloadend = function() {

                let content = fileReader.result;
                $('#data_image1').val(content);
                file.previewElement.classList.add("dz-success");
            }

            file.previewElement.classList.add("dz-success");
            //console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            console.log('Error image1');
                $('#data_image1').val('');
            file.previewElement.classList.add("dz-error");
        }
    });

});

（插入数据库）

显示未压缩的图像：


<img id="photo_1_hidden" src="<cfoutput>#get1.photo_1#</cfoutput>" hidden />    
<img id="photo_1_view" src="" />

<!-- Notice the two <img /> tags first is hidden this will read our compressed base64 string from the DB
-- the second <img /> tag is visible but with no src code, this will be added dynamically through JavaScript



<script>

 // Get compressed string from DB into JS

compressedString = document.getElementById('photo_1_hidden').src;

 // decompressed the string using Base64String.js same library as used in sub-freeform.cfm

decompressedString = Base64String.decompress(compressedString);

 // set this decompressed string into second image tag for CF to read as image.

 // Please Note this is using imageReadBase64() of Coldfusion 

 // I am simply trying to write it into <img /> tag as shown in code examples in other files.

document.getElementById('photo_1_view').src='<cfoutput>imageReadBase64("' + decompressedString + '")</cfoutput>';

在表单页面上，我想压缩dropzone数据并将其发送到“操作”页面，然后将其插入数据库。然后，我想解压缩该图像文件并显示它。

如何压缩dropzone图片以发送到db，然后将其解压缩以查看？

0 个答案: