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在新创建的文件中编写内容。如果文件已经存在这个名称，我添加一个递增的计数器，直到文件名concat与一个数字不存在。

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

与Issam说的另一个解决方案是，在image属性上使用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

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

使用angular-wakanda下载文件

3 个答案: