在AngularJs中上传图像文件和ng文件中的.xlsx时,文件已损坏 [英] Files are corrupted when upload image files and .xlsx in ng file upload in AngularJs
问题描述
要将文件上传到服务器,我使用了 ng-file-up .以多部分形式发送文件.还可以将多个文件上传到服务器.到目前为止,它可以处理文本,xml和csv文件.我不确定是否在启用其他格式(例如 jpeg,png)时出错了和 .xlsx 文件格式.
To upload files into server i used ng-file-upload.In there i send files as form multi part.Also can upload multiple files to server.So far it is working with text,xml and csv files.I am not sure if i did some mistake to enable other format as well like jpeg,png and .xlsx file format.
这是我的前端代码段.
<div class="input input-file "><span class="button"><input name="files[]" ngf-select multiple accept="text/csv/xlsx/xls" ngf-pattern=".txt,.xml,.xls,.csv,.xlsx" ngf-max-height="1000" ngf-max-size="10MB" type="file" id="tattachments"name="file" ng-model="MODEL_COL_FIELD" onchange="this.parentNode.nextSibling.value = this.value">Browse</span>
<input
ng-class="\'colt\' + col.uid" ui-grid-edit-file-chooser id="attachments" type="text" placeholder="Select some files (optional)" readonly="">
</div>
我启用了以下ng文件上传指令,例如 accept ="text/csv/xlsx/xls" ngf-pattern =.txt,.xml,.xls,.csv,.xlsx"
I enabled following ng-file upload directives as like accept="text/csv/xlsx/xls" ngf-pattern=".txt,.xml,.xls,.csv,.xlsx"
请求标头详细信息
Content-Disposition: form-data; name="files[0]"; filename="sampleFile.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
我不确定我在这里是否犯了任何错误.
I am not sure if i did any mistake here.
后端代码段,用于将文件保存到DB
private FilesAttachment addFileAttachment(String fileName,
String fileContent, String mimeType) {
FilesAttachment attachment = new FilesAttachment();
byte[] stream = fileContent.getBytes();
attachment.setData(stream);
attachment.setTimestamp(Calendar.getInstance().getTime());
attachment.setSize(stream.length);
attachment.setFilename(fileName);
attachment.setDescription(fileName);
attachment.setMimetype(mimeType);
return attachment;
}
JS代码段
var promise= Upload.upload({
url: REST END point URL,
data: {
files: attachments, //File list contains selected files
'message':message,
'userName': userName
}}).then(function (response) {
etc ...
}
然后我尝试访问已上传的文件,但无法打开它们.请让我知道我做错了.
Then i tried to access files that i have uploaded but i cant open them.Please let me know what i did wrong.
推荐答案
在使用 Upload.upload()
时,我也遇到了同样的问题.上传的文件已损坏.因此,我按如下所示更改了代码,问题得到解决.
I was also having the same issue while using Upload.upload()
. The uploaded files were getting corrupted. So I changed my code as below and issue got resolved.
此处的关键点是使用 transformRequest:[]
.这样可以防止$ http弄乱文件.
The key point here is to use transformRequest: []
. This will prevent $http with messing with the file.
function getFileBuffer(file) {
var deferred = new $q.defer();
var reader = new FileReader();
reader.onloadend = function (e) {
deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise;
}
function ngUploadFileUpload(endPointUrl, file) {
var deferred = new $q.defer();
getFileBuffer(file).then(function (arrayBuffer) {
$http({
method: 'POST',
url: endPointUrl,
headers: {
"accept": "application/json;odata=verbose",
'X-RequestDigest': spContext.securityValidation,
"content-length": arrayBuffer.byteLength
},
data: arrayBuffer,
transformRequest: []
}).then(function (data) {
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
console.error("Error", error)
});
}, function (error) {
console.error("Error", error)
});
return deferred.promise;
}
这篇关于在AngularJs中上传图像文件和ng文件中的.xlsx时,文件已损坏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!