在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屋！