angularJs2 formData 传有附件的请求

最近项目中需要提交个form中有上传附件功能的需求，项目用的angular2版本，UI用的PrimeNG开源框架，这里的upload file的控件就是已经是框架提供了的。https://www.primefaces.org/primeng/#/setup  感兴趣的可以去这个官网学习下。可以用npm命令去下载。



官方的原本控件应该是这个样子，但是这个控件只能点击Upload方法去提交附件，而且有些属性在我的项目中并没有起作用估计是我用的版本太低问题，比如customUpload,还有方法，导致很多功能不能用。不过最终我是在commponent引入Jquery,来做了这个需求。hidden upload的按钮，在import头上声明 declare var $: any就可以了，之前头文件必须添加jquery的引用。

最简单的直接用css样式，找到这个标签然后display设置为None.

 $("[icon='fa-upload']").css("display", "none");



在控件中加onSelect 和 onClear方法，做对fileList的保存还有清除。

<p-fileUpload #uploadFileId name="UploadFiles[]" url="" multiple="multiple" accept="image/*" maxFileSize="5000000"
(onSelect)="myUploader($event)" (onClear)="removeAll($event)" cancelLabel="Remove"></p-fileUpload>
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="attachmentShowError">
<i class="fa fa-close"></i>
{{attachmentErrorMessage}}
</div>

myUploader(event: any) {
for (let file of event.files) {
if (!this.validatorsService.isContains(this.uiConfigModel._acceptFileType, file.type)) {
this.attachmentShowError = true;
this.attachmentErrorMessage = 'allowed file types ' + this.uiConfigModel._acceptFileType;
} else {
this.attachmentShowError = false;
}
this.uploadedFiles.push(file);
}
setTimeout(function removeDeleteBtn() {
if ($('div[class="ui-fileupload-row"]') && $('button[icon="fa-close"]')) {
$('div[class="ui-fileupload-row"] button[icon="fa-close"]').css("display", "none");
}
}, 50)
}

removeAll(event: any) {
this.uploadedFiles.splice(0, this.uploadedFiles.length);
this.attachmentShowError = false;
}

这样在做submit的时候，就可以在component中拿到上传的fileList了。这是以前的代码，用的 http.post ng封装好的post请求方法，不知道哪里出错，有文件的数据，传出去怎么都是接收不到，换了各种 Content-Type，都还是接收不到，通过F12看，才发现每次Ng都会自动给这个设置成 ‘application/json’的格式，无论用delete还是set都不行，设置Undefined也是自动用的json传的数据。最终放弃用jquery ajax直接去发请求ok.

saveAbsenceRequest(RequestModel: any) {
let headers = new Headers();
headers.append('X-Requested-With', 'XMLHttpRequest');
//headers.append('Content-Type', 'application/x-www-form-urlencoded');
//headers.set('Content-Type', undefined);
headers.delete("Content-Type");
//headers.append('Accept', 'application/json');
let myOptions = new RequestOptions({ headers: headers });
//return this.http.post('./LeaveInfo/SaveAbsenceRequest', { data: RequestModel }, myOptions).toPromise()
//    .then(res => <AbsenceRequestModal>res.json().data)
//    .then(data => { return data; });
}

创建一个新的form用来穿formdata, 如果有file文件就append到form上。

var formData = new FormData();
this.absenceReuqest.Duration = value["duration"];

formData.append('RequestModel', JSON.stringify(this.absenceReuqest));       

for (var i = 0; i < this.uploadedFiles.length; i++) {
if (!this.validatorsService.isContains(this.uiConfigModel._acceptFileType, this.uploadedFiles[i].type))
{
this.loading = false;
this.attachmentShowError = true;
this.attachmentErrorMessage = 'allowed file types ' + this.uiConfigModel._acceptFileType;
return false;
}
formData.append("UploadFiles", this.uploadedFiles[i]);

然后直接用ajax 发请求，然后顺利拿到form的所有数据。还有 由于在TS里直接用ajax中请求，js代码就不会被编译，所以在success 或者 error里用 TS的属性还有一些功能就不会生效了，所以要拿到外面，最好用同步发请求 这样就可以拿到返回的值就可以做 成功还是失败后的功能了。

$.ajax({
url: './LeaveInfo/SaveRequest',
data: formData,
type: 'POST',
contentType: false,
processData: false,
async: false,
success: function (data: any) {
if (data.data.IsSuccess) {
messageFlag = "success";
} else {
messageFlag = "failure";
}
},
error: function (err: any) {
messageFlag = "failure";
}
});

后台C#code: 用json convert到自己的实体里。如果有文件就加进一个list中。最终转成base64 string存在数据库中。

public ActionResult SaveRequest()
{
if (Request.Form["RequestModel"] == null) return null;
var absenceRequestModel = Newtonsoft.Json.JsonConvert.DeserializeObject<AbsenceRequestModel>(Request.Form["RequestModel"]);

            if (Request.Files.Count > 0)
            {
                var AttachmentFiles = new List<Attachmentfiles>();
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    var attachment = new Attachmentfiles
                    {
                        FileContent = GetAttachmentContent(Request.Files[i]),
                        FileName = Request.Files[i].FileName
                    };
                    AttachmentFiles.Add(attachment);
                }
                absenceRequestList.Attachements = AttachmentFiles;
            }

}

private string GetAttachmentContent(HttpPostedFileBase file)
{
byte[] fileContentData;
using (var inputStream = file.InputStream)
{
var memoryStream = inputStream as MemoryStream;

if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}

fileContentData = memoryStream.ToArray();
}
var FileStr = Convert.ToBase64String(fileContentData);
return FileStr;
}