javascript - 使用 formGroup 上传文件时出现问题

Question

我正在使用 Angular 制作一个包含一些信息(姓名、电子邮件、密码和头像)的注册表单。后端我使用 NodeJS 和 MongoDB 来存储信息。关于后端我已经写好了注册API OK。我在 postman 上测试过，它对后端有效!

但是在 Angular 客户端中，当我从注册表单输入信息时，出现错误，我正在使用 formData 将输入表单发送到后端 API。

我正在使用 formGroup 发送我的用户系统对象，包括(姓名、 Angular 色、电子邮件、密码和头像)

这是我的 html 文件。

<div class="common-form float_left ">
    <form [formGroup]="dialogRegisterUserSysForm" >
        <div class="field_wrapper box FlowupLabels">
            <label class="label">NAME</label>

            <div class="field fl_wrap pad-top-0">
                <input  type="text" name="name" formControlName="name" maxlength="255" placeholder="Enter user system name" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
            </div>
            <div class="clr"></div>
        </div>

        <div class="field_wrapper box FlowupLabels">
            <label class="label">PASSWORD</label>

            <div class="field fl_wrap pad-top-0">
                <input  type="password" id="illness-name" class="input-big hc_name fl_input ui-autocomplete-input" name="password" formControlName="password" maxlength="255" placeholder="Please enter a password" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
            </div>

            <div class="error_field" id="testResultsErrors"></div>  <div class="clr"></div>
        </div>

        <div class="field_wrapper box FlowupLabels">
            <label class="label">EMAIL</label>

            <div class="field fl_wrap pad-top-0">
                <input  type="text" id="illness-name" class="input-big hc_name fl_input ui-autocomplete-input" name="email" formControlName="email" maxlength="255" placeholder="Enter an email." autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
            </div>

            <div class="error_field" id="testResultsErrors"></div>  <div class="clr"></div>
        </div>

        <div>
            <label>Upload Avatar</label>
            <input (change)="onFileSelect($event.target)" type="file" formControlName="avatar" class="form-control">
        </div>

        <div class="save-cancel-btngrp-wrap">

            <div class="cancel-link switchToViewMode" style="float: right">
                <a (click)="matDialogRef.close(dialogRegisterUserSysForm)" class="switchToViewMode btn flat">CANCEL</a>
            </div>

            <div *ngIf="action =='new'" class="cancel-link switchToViewMode" style="float: right">
                <a  (click)="matDialogRef.close(['save',dialogRegisterUserSysForm])" class="switchToViewMode btn flat">SAVE</a>
            </div>

        </div>
    </form>
</div>

在这个表单中，头像是文件输入，我写了“onFileSelect(input)”方法。

onFileSelect(input) {
         var fInput = input.files[0];
         var fileName = fInput.name;
        alert(fileName);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = (e: any) => {
                alert("Result: " + e.target.result);
                this.userSys.avatar = e.target.result;
                // reader.readAsDataURL(input.files[0]);
        }
        // this.userSys.avatar = e.target.result;
        reader.readAsDataURL(input.files[0]);
    }
}

下面是我的 ts 文件。

import { FormBuilder, FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { UserSysService } from '../usersys.service';
import { UserSysModel } from '../usersys.model';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
    selector     : 'usersys-form-dialog',
    templateUrl  : './usersys-form.component.html',
    styleUrls    : ['./usersys.component.scss'],
    encapsulation: ViewEncapsulation.None
})

export class UserSysFormDialogComponent
{

    action: string;
    userSys: UserSysModel;  // Medical report model
    dialogRegisterUserSysForm: FormGroup;
    dialogTitle: string;

    /**
     * Constructor
     *
     * @param {MatDialogRef<MedicalReportFormDialogComponent>} matDialogRef
     * @param _data
     * @param {FormBuilder} _formBuilder
     */
    constructor(
        // private _mrReportService: HealthMedicalReportService,
        public matDialogRef: MatDialogRef<UserSysFormDialogComponent>,
        @Inject(MAT_DIALOG_DATA) private _data: any,
        private _formBuilder: FormBuilder
    )
    {
        // this.dialogTitle = 'Add New Medical Report';
        // set default here
        this.action = this._data.action;

        if(this.action === 'edit'){
            this.dialogTitle = 'Edit User System';
            this.userSys = _data.userSys;

        }else{
            this.dialogTitle = 'Register new User System';
            this.userSys = new UserSysModel({});

        }

       this.dialogRegisterUserSysForm = this.createUserSystemDialogForm();
    }

     onFileSelect(input) {
         var fInput = input.files[0];
         var fileName = fInput.name;
        alert(fileName);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = (e: any) => {
                alert("Result: " + e.target.result);
                this.userSys.avatar = e.target.result;
                // reader.readAsDataURL(input.files[0]);
        }
        // this.userSys.avatar = e.target.result;
        reader.readAsDataURL(input.files[0]);
    }
}


    /**
     * Create UserSystem form
     *
     * @returns {FormGroup}
     */
    createUserSystemDialogForm(): FormGroup
    {

        return this._formBuilder.group({

            email : [this.userSys.email],
            password : [this.userSys.password],
            name  : [this.userSys.name],
            avatar :     [this.userSys.avatar]
        });
    }


}

下面是我的注册表的图片:

但是我收到错误“fakepath”，我无法将此表单发布到服务器。

我认为我的英语不好，所以可能我的解释很难理解。非常感谢您

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
    window.onload = function () {
        document.getElementById("uploadfile").disabled = true;
        document.getElementById("excelData").disabled = false;
    };

    document.addEventListener('keydown', function (e) {
        if (e.which == 116) {
            window.onbeforeunload = function () {
                window.onbeforeunload = null;
                $(".se-pre-con").fadeIn("slow");
            }
        }
    }, false);
    $(document).ready(function () {

        $(".se-pre-con").fadeOut("slow");;

    });




    function LoadPreloder() {
        $(".se-pre-con").fadeIn("slow");;
    }
    function UnloadPreloder() {
        $(".se-pre-con").fadeOut("slow");;
    }
    function enableDisable() {
        var FileSelectedValue = null;
        var ClassSelected = 0;
        FileSelectedValue = document.getElementById("excelData").value;
        ClassSelected = document.getElementById("SelectedClass").value;
        //alert(ClassSelected);



        if (document.getElementById("excelData").files.length) {
            // alert("File is Selected !!");
            document.getElementById("uploadfile").disabled = false;
        }
        else if (!document.getElementById("excelData").files.length) {
            //alert("No File Selected !");
            document.getElementById("uploadfile").disabled = true;
        }
    }
</script>

@section AngularScripts{
    <script type="text/javascript">
        var schoolStuff = angular.module("schoolStuff", ['lr.upload']);
        schoolStuff.controller("downloadDataformateController", ['$scope', 'upload', '$http', function ($scope, upload, $http) {
            $http.get('@Url.Action("GetStandardDivisionList", "Collection")')
                 .then(function (response) {
                     $scope.Standard_Mapping_Division = response.data;
                     // $scope.Standard_Mapping_DivisionId = $scope.Standard_Mapping_Division[0].Standard_Mapping_DivisionId;
                     $scope.dataType = [
                                        { "dataTypeId": "1", "dataTypeValue": "Student" },
                                        { "dataTypeId": "2", "dataTypeValue": "Teacher" }
                     ];
                     $scope.dataTypeId = $scope.dataType[0].dataTypeId;
                     $scope.showdragdrop = null;
                 });

            $scope.uploadExcel = function () {
                LoadPreloder();
                if ($scope.dataFile != undefined) {
                    upload({
                        url: '@Url.Action("PostExcelStudent", "ManageExcelData")',
                        method: 'POST',
                        data: {
                            standard_mapping_divisionId: $scope.Standard_Mapping_DivisionId,
                            typeId: $scope.dataTypeId,
                            dataFile: $scope.dataFile
                        }
                    }).then(function (response) {
                        alert(response.data.Message);
                        $scope.UploadedStudentData = response.data.studentsdata;
                        UnloadPreloder();

                    });
                                    }
            }
            $scope.changeme = function () {
                //alert($scope.showdragdrop);
                //enableDisable();
                $scope.showdragdrop = 1;
                // alert($scope.showdragdrop);
            }

            $scope.uploadStudentData = function () {
                LoadPreloder($scope.UploadedStudentData);
                console.log()
                $http({
                    url: '@Url.Action("UploadStudentData", "ManageExcelData")',
                    method: 'POST',
                    data: {
                        standard_mapping_divisionId: $scope.Standard_Mapping_DivisionId,
                        studentData: $scope.UploadedStudentData
                    }
                }).then(function (response) {

                    $scope.InsertedStudentData = response.data.studentsdata;

                    if (($scope.InsertedStudentData).length != 0) {
                        UnloadPreloder();
                        $scope.UploadedStudentDataNull = null;

                        $('html, body').animate({ scrollTop: $('#InseertedStudentRecord').offset().top }, 'slow');

                        //console.log(response);
                        //alert(response.data.Message);
                        //alert(response.data.teachersdata);
                        //alert(response.data.Success);
                        $scope.InsertedStudentData = response.data.studentsdata;
                        if (response.data.Success != 0) {
                            if (($scope.InsertedStudentData).length != 0) {
                                UnloadPreloder();
                                $scope.UploadedStudentDataNull = null;

                                $('html, body').animate({ scrollTop: $('#InseertedStudentRecord').offset().top }, 'fast');

                            }

                            else if (($scope.InsertedStudentData).length == 0) {
                                $scope.UploadedTeacherDataNull = 0;
                                UnloadPreloder();

                                // alert($scope.UploadedTeacherDataNull);
                            }
                        }
                        else if (response.data.Success == 0) {
                            alert(response.data.Message);
                            UnloadPreloder();

                        }

                    }

                    else if (($scope.InsertedStudentData).length == 0) {
                        $scope.UploadedStudentDataNull = 0;
                        UnloadPreloder();

                        // alert($scope.UploadedTeacherDataNull);
                    }
                    UnloadPreloder();
                });
            }

        }]).directive('uploadFile', ['$parse', function ($parse) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var file_uploaded = $parse(attrs.uploadFile);
                    element.bind('change', function () {
                        scope.$apply(function () {
                            file_uploaded.assign(scope, element[0].files[0]);
                        });
                    });
                }
            };
        }]);





    </script>
}