即使使用 Angular-Wakanda，我也在尝试添加文件上传，但我真的不知道从哪里开始......
带有文件输入元素的图像上传（https://wakanda.github.io/angular-wakanda/#/doc/developer-guide/image-upload）正在工作，但我想在文件上传后处理文件服务器端：意思是将文件上传到服务器目录并在文件完成后调用服务器方法已成功上传。
任何开始的示例或方向都将受到赞赏。
【问题讨论】：
标签： angularjs file-upload wakanda
为此，您必须使用自己的方法服务器端。您可以使用 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 所说，在图像属性上使用 validate 事件，那么您应该能够在事件内部处理文件。
这还取决于您要对文件执行的过程？
【讨论】：
要在 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);
});
【讨论】：
您可以使用Attribute events，根据您的需要尝试validate 或save 事件。 它们允许您在保存文件之前触发方法。
【讨论】：