使用 angular-wakanda 拖放文件上传

Question

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

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

任何示例或指导都将不胜感激。

Answer 1

您可以使用 Attribute events，根据您的需要尝试 validate 或 save 事件。它们允许您在保存文件之前触发一个方法。

Answer 2

为此，您必须在服务器端使用自己的方法。您可以使用 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); 
        }
    });
}

这个方法return一个承诺，但你并不真的需要它。

这是我在服务器端的代码

/*
 * 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 所说，在图像属性上使用验证事件，那么您应该能够在事件中处理文件。

这也取决于您要对文件进行的处理？

Answer 3

要在 html 元素上添加拖放支持，请将以下代码添加到上述答案中：

向 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 事件添加到拖放区并调用 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);
        });

使用 angular-wakanda 拖放文件上传

File upload on drop with angular-wakanda

angularjs

file-upload

wakanda