Question

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

这是我的前端代码段。

<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-file上传指令，如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

我不确定这里是否有任何错误。

将文件保存到数据库的后端代码段

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

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

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

        }

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

1 个答案: