图像以形式上传

Question

我具有带有文本字段的角形式，并希望添加以相同形式上传图像的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;
         }
      }
    }

需要保存文件以及表单提交

Answer 1

这是一个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>

它来自FileReader的文档。因此，您应该能够在想要的任何地方存储input并将路径存储在MongoDB集合的内部。否则，如果您想使用Angular插件，这里可能对您有用：Angular-File-Upload