angularjs - 使用 angular-wakanda 拖放文件上传

Question

即使使用 Angular-Wakanda，我也正在尝试添加文件上传，但我真的不知道从哪里开始......

带有文件输入元素的图像上传（https://wakanda.github.io/angular-wakanda/#/doc/developer-guide/image-upload）正在工作，但我想在文件上传后处理文件服务器端：意思是将文件上传到服务器目录，并在文件成功上传后调用服务器方法。

任何从哪里开始的例子或方向都会受到赞赏。

Answer 1

为此，您必须使用自己的方法服务器端。您可以使用 RPC 方法、数据类方法或 HTTP 处理程序。

我在这里向您展示的解决方案使用最后一个，即 HTTP 处理程序。

您必须发送在 fileUpload 中选择的文件，然后在服务器端方法内的服务器端执行该过程。

这是我的客户端代码

function uploadFiles() {
    return new Promise(function(resolve,refuse){
        var fileInputs = $('#editorsDiv input[type="file"]'),
            fd = new FormData(),
            atLeastOneFile = false;

        fileInputs.each(function(index,value){
            if(this.files.length !== 0){
                fd.append(this.id,this.files[0],this.files[0].name);
                atLeastOneFile = true;
            }
        });
        if(atLeastOneFile){
            $.ajax({
                url: '/uploadFile',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: fd,
                success:function(evt){
                    app.data.templateImages = evt;
                    resolve(true);
                }
            });
        }else{
            resolve(true); 
        }
    });
}

此方法返回一个承诺，但您并不需要它。

这是我在服务器端的代码

/*
 * This method can handle the upload of files send via http request
 * The files are stored in the DateFolder/uploadFiles
 * It return an JSON containing the id and the name of the fileuploaded. The name can change if there is an existing file with the same name.
 *
 */

function uploadFile(request,response){
    var i,
        j=1,
        nameTemp,
        files=[],
        returnJSON = [],
        newName;

    for(i=0;i<request.parts.length;i++){
        files.push(new File(getFolder('path')+'/DataFolder/uploadFiles/'+request.parts[i].fileName.replace(/\s/g,'_')));
        returnJSON[i]={};
        returnJSON[i].name = request.parts[i].name
        returnJSON[i].value = request.parts[i].fileName;
    }

    for(i=0;i<files.length;i++){
        j=1;
        if(!files[i].exists){
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
        }else{
            while(files[i].exists){
                nameTemp = files[i].name.replace(/\s/g,'_');
                files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+files[i].nameNoExt.replace(/\s/g,'_')+j+'.'+files[i].extension);
                newName = files[i].name;
                if(files[i].exists){
                    files[i] = new File(getFolder('path')+'/DataFolder/uploadFiles/'+nameTemp);
                }
                j++;
            }
            myBinaryStream = BinaryStream(files[i],'Write');
            myBinaryStream.putBlob(request.parts[i].asBlob);
            myBinaryStream.close();
            returnJSON[i].value = newName;
        }
    }
    returnJSON = JSON.stringify(returnJSON);
    response.contentType = 'application/json';
    return returnJSON;
}

你可以在这里看到我正在处理我的文件。在这里我要做的是在位置上创建文件<PROJECT_PATH>/DataFolder/Upload/，然后我必须在新创建的文件中写入内容BinaryStream。如果该文件已使用此名称存在，我会添加一个计数器，该计数器会递增，直到带有数字的文件名不存在。

所以在这里你可以对文件做任何你想做的事情。您还可以提供一个 ID，然后为实体保存文件。

另一种解决方案是，就像 Issam 所说，在图像属性上使用 validate 事件，那么您应该能够在事件内部处理文件。

它还取决于您要对文件执行的过程？

Answer 2

要在 html 元素上添加拖放支持，请将以下代码添加到上述答案中：https ://stackoverflow.com/a/37348103/4685398

将删除文件的验证添加到uploadFiles(). 如果没有dropppedFiles用fileInputs：

    // file upload
    $scope.uploadFiles = function(droppedFiles) {
        return new Promise(function(resolve, refuse) {
            var fileInputs = $('input[type="file"]');
            var formData = new FormData();
            var atLeastOneFile = false;

            // validate if dropzone or file input
            if (droppedFiles) {
                for (var i = 0; i < droppedFiles.length; i++) {
                    formData.append('dropzone', droppedFiles[i], droppedFiles[i].name);
                    atLeastOneFile = true;
                };
            }
            else {
                fileInputs.each(function(index, value) {
                    if (this.files.length !== 0) {
                        formData.append('form', this.files[0], this.files[0].name);
                        atLeastOneFile = true;
                    }
                });
            }
            if (atLeastOneFile) {
                $.ajax({
                    url: '/uploadFile',
                    type: 'POST',
                    processData: false, // important
                    contentType: false, // important
                    dataType: 'json',
                    data: formData,
                    success: function(evt) {
                        resolve(true);
                    }
                });
            }
            else {
                resolve(true);
            }
        });
    };

将drop事件添加到 dropzone 并uploadFiles(e.originalEvent.dataTransfer.files)使用删除的文件进行调用：

    // dropzone for file upload
    $("#drop-box").on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
        })
        .on('dragover dragenter', function() {
            $(this).addClass('is-dragover');
        })
        .on('dragleave dragend drop', function() {
            $(this).removeClass('is-dragover');
        })
        .on('drop', function(e) {
            $scope.uploadFiles(e.originalEvent.dataTransfer.files);
        });

Answer 3

您可以使用 属性事件，根据您的需要尝试验证或保存事件。它们允许您在保存文件之前触发方法。