拖放操作时如何传输较长的Base-64字符串？

如何解决拖放操作时如何传输较长的Base-64字符串？

我要做的是，选择要输入的图像，然后在提交之前将它们显示在屏幕上，同时还可以通过拖放在屏幕上更改它们的顺序。我使用readFile()在屏幕上显示它们，将图像转换为我放入img标记的source属性中的base-64格式。当我拖动图像时，我将base-64代码设置为传输的数据。问题是，当图像大小大于1mb时，它会显示在屏幕上，但是拖放时不会传输其长的base-64代码。如何解决？

HTML：

<div class="upload">
    <form action="post">
        <input type="file" name="files[]" multiple="true">
        <input type="submit" name="submit">
    </form>
</div>
<div class="preview">
</div>

JS：

let input = document.querySelector('[name="files[]"]');

let preview = document.querySelector('.preview');

let toDelete = [];

input.addEventListener('input',setgallery);

function setgallery () {
    //Emptying the gallery
    preview.innerHTML = "";

    //Getting input images
    let files = input.files;

    //Starting file reading for each image;
    Array.from(files).forEach((file,i)=>{
        
        let reader = new FileReader();
        reader.onload = function (ev) {

            //creating a div to wrap image and setting a class
            let imgCtn = document.createElement('div');
            imgCtn.classList.add('img-ctn');

            //creating image tag and adding source
            let image = document.createElement('img');
            image.setAttribute('src',ev.target.result);
            imageEnhance(image);

            //Creating a spacer
            let spacer = document.createElement('div');
            spacerEnhance(spacer);

            //Appending everything to the body
            //Creating a starting spacer for first image
            if(i===0){
                let firstSpacer = document.createElement('div');
                spacerEnhance(firstSpacer);
                preview.appendChild(firstSpacer);
            }

            imgCtn.appendChild(image);
            preview.appendChild(imgCtn);
            preview.appendChild(spacer);
        };
        reader.readAsDataURL(input.files[i]);
    })
}

function spacerEnhance (spacer) {
    spacer.classList.add('spacer');
    spacer.addEventListener('dragover',(e)=>e.preventDefault());
    spacer.addEventListener('drop',(e)=>{
        let itself = e.target;
        
        let newCtn = document.createElement('div');
        newCtn.classList.add('img-ctn');

        //Creating new image tag with source from getData
        let image = document.createElement('img');
        image.setAttribute('src',e.dataTransfer.getData('text/uri-list'));
        imageEnhance(image);

        newCtn.appendChild(image);
        
        //Create two more spacers
        let spacer = document.createElement('div');
        spacerEnhance(spacer);

        //Append
        preview.insertBefore(newCtn,itself);
        preview.insertBefore(spacer,itself.prevIoUsSibling);
        toDelete.forEach(del=>{
            preview.removeChild(del);
        })
    })
}


function imageEnhance (image) {
    image.setAttribute('draggable','true');
    image.addEventListener('drag',(e)=>{
        e.dataTransfer.setData('text/html',e.target);
        toDelete.length = 0;
        toDelete.push(e.target.parentNode);
        toDelete.push(e.target.parentNode.prevIoUsSibling);
    })
}

CSS：

* {
  margin: 0px;
  padding: 0px;
  Box-sizing: border-Box;
}

.upload {
  height: 10vh;
  background-color: aliceblue;
  display: flex;
  align-items: center;
  padding: 0px 40px;
}

.preview {
  height: 90vh;
  background-color: lightgray;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
}

.img-ctn {
  height: 100px;
}

.img-ctn img {
  height: 100%;
}

.spacer {
  width: 10px;
  height: 100px;
  border-radius: 4px;
  transition: all 0.1s linear;
  flex-shrink: 0;
}

.spacer-active {
  width: 30px;
  border: 3px solid rgb(0,195,255);
  background-color: lightskyblue;
}