Question

我有一个带文本字段的角形表单，想要添加一个以相同形式上传图像的选项。我坚持使用后者。

角形包含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

以表格形式上传图像

1 个答案: