Node.js 在表单中上载图像

我有一个带有文本字段的角度表单，希望添加am选项，以便在相同表单中上载图像。我被后者难住了

angular表单包含用于上载文件的html标记。上传文件后，上传文件的名称将显示在输入字段中

<!--blog.html-->
<!--form to create new blog--> 

    <form #blogForm="ngForm" (ngSubmit)="Save(blogForm);">
                    <div class="form-group">
                      <label>Blog Title</label>
                      <input type="text" class="form-control input-text" maxlength="45" name="title" ngModel #blogtitle="ngModel"  required placeholder="Blog Title">
                      <span class="required" *ngIf="blogtitle.errors?.required && (blogtitle.dirty||blogtitle.touched||blogtitle.untouched)">*required</span>
                    </div>
                    <div class="form-group">
                      <label>Blog </label>
                      <textarea class="textarea form-control" maxlength="150" name="summary" [(ngModel)]="summary">
                        Blog</textarea>
                    </div>
                    <div class="form-group">
                      <label>Blog Desc</label>
                      <textarea class="textarea form-control" name="description" ngModel #blogdescription="ngModel" required>Blog Description</textarea>
                      <span  class="required" *ngIf="blogdescription.errors?.required && (blogdescription.dirty||blogdescription.touched||blogdescription.untouched)">*required</span>
                    </div>
                    <div class="form-group">
                      <label>HashTags</label>
                      <input type="text" class="form-control input-text" name="hashtag" [(ngModel)]="hashtag" placeholder="hashtags">
                    </div>

                    <div class="form-group">
                      <div class="custom-file">
    <!--file upload -->
                        <input type="file" class="custom-file-input form-control-lg" name="file" id="customFile"
                         value="imageFile.name" (change)="handleImageFileInput($event)">
                        <input type="text" readonly="true"  [value]="imageFile" class="custom-file-label"  >
                        <button  type="button" (click)="upload()">Upload</button>
                      </div>
                    </div>
                    <input type="button" class="btn-default" (click)="Save(blogForm)" value="Create">
                  </form>

//blog.ts
//function to create  new blog 

    Save(blogForm: any) {

        if (blogForm.valid === true)  {
          blogForm = blogForm.value;
          blogForm.userId = this.user_id;
          blogForm.author = this.display_name;
          window.confirm('Want to Publish?');
          this.blogservice.Save(blogForm).subscribe(response => {
          window.alert('Blog published successfully');
          this.router.navigate(['/dashboard']);
          });
        }
      }

//function to display selected image in the input field


    handleImageFileInput(event) {
        const img1 =event.target.files[0];
        const img =event.target.files[0].name;
        const fileList: FileList = event.target.files;
        const fileCount = fileList.length;
        if (fileCount > 0) {
          const file = fileList.item(0);
          console.log(` image file: ${file.name}`);
          console.log(img1);

          if(img == undefined) {
           this.imageFile = 'Upload an image';
         } else {
         this.imageFile = img;
         }
      }

    }

博客标题
*必需的
博客
博客
博客描述
博客描述
*必需的
标签
上传
//blog.ts
//创建新博客的函数
保存（blogForm:any）{
if（blogForm.valid==true）{
blogForm=blogForm.value；
blogForm.userId=this.user\u id；
blogForm.author=this.display\u name；
window.confirm（'要发布？'）；
this.blogservice.Save（blogForm.subscribe）（响应=>{
window.alert（“博客发布成功”）；
this.router.navigate（['/dashboard']）；
});
}
}
//在输入字段中显示所选图像的功能
handleImageFileInput（事件）{
const img1=event.target.files[0]；
常量img=event.target.files[0]。名称；
const fileList:fileList=event.target.files；
const fileCount=fileList.length；
如果（文件计数>0）{
const file=fileList.item（0）；
log（`image file:${file.name}`）；
console.log（img1）；
如果（img==未定义）{
this.imageFile='上载图像'；
}否则{
this.imageFile=img；
}
}
}

---

需要将文件与表单提交一起保存

以下是一个JavaScript脚本，它将从输入中读取数据并显示：

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

它来自于的文档。 这样，您就可以在任何需要的地方存储

输入

，并将路径存储在MongoDB集合中。 否则，如果您想使用Angular插件，这里有一个可能对您有用：

---

您想将其保存在哪里？大多数情况下，

event.target.files[0]

足以将文件上载到某个地方。@DataHearth我正在尝试上载并保存Mongodby中博客集合中的文件。您可以将文件保存在应用程序目录中的文件夹中，然后从

event.target.files[0]保存文件名.name

插入MongoDB集合中的属性。静态图像无法正确保存。感谢您的回复，此js代码在我的Angulars中不起作用，因此您应该检查angular插件。我尝试过angular插件，但从未正确保存