在 AngularJs 中上传图像文件和 ng 文件中的 .xlsx 时文件已损坏答案

【问题标题】：Files are corrupted when upload image files and .xlsx in ng file upload in AngularJs在 AngularJs 中上传图像文件和 ng 文件中的 .xlsx 时文件已损坏
【发布时间】：2017-01-10 02:21:49
【问题描述】：

要将文件上传到服务器，我使用了ng-file-upload。在那里我以多部分的形式发送文件。也可以将多个文件上传到服务器。到目前为止，它正在处理文本、xml 和 csv 文件。我不确定是否我在启用其他格式时犯了一些错误，例如 jpeg,png 和 .xlsx 文件格式。

这是我的前端代码 sn-p。

<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>

我启用了像accept="text/csv/xlsx/xls" ngf-pattern=".txt,.xml,.xls,.csv,.xlsx"这样的ng-file上传指令

请求标头详细信息

Content-Disposition: form-data; name="files[0]"; filename="sampleFile.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

我不确定我是否在这里做错了。

后端代码 sn-p 将文件保存到数据库中

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代码sn-p

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 ...
             }

然后我尝试访问我上传的文件，但我无法打开它们。请让我知道我做错了什么。

【问题讨论】：

发布你的js代码
@danial 更新了帖子。请看一下。
您是否手动设置“Content-Type”标头？
@danial 我为每个请求设置如下默认标头。 $httpProvider.defaults.headers.common["Accept"] = 'application/json'; $httpProvider.defaults.headers.common["Content-Type"] = 'application/json';可以将文件数据转成base64编码吗？
但我没有为上面的Upload.upload() 设置 Content-Type 标头是默认的角度资源标头。

标签： java angularjs ng-file-upload

【解决方案1】：

我在使用Upload.upload() 时也遇到了同样的问题。上传的文件已损坏。所以我改变了我的代码如下，问题得到了解决。

这里的关键是使用transformRequest: []。这将防止 $http 弄乱文件。

      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;

        }

【讨论】：