Question

我以角度6进行开发。我想上传多种类型的媒体视频，音频，文档和图像图像。

目前，与我配合良好的方法是上传图片，但我的文章也可以包含视频，音频或文档。

article.component.html

<div class="mb-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title"><span class="card-component-title">Article:</span> {{data.title}}</h5>
      <div class="row">
        <div class="col-md-12">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >Title</span>
            </div>
            <input type="text" class="form-control" [(ngModel)]="data.title">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">Subtitle</span>
            </div>
            <input type="text" class="form-control" [(ngModel)]="data.subtitle">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="text-right mb-3">
            <button type="button" class="btn btn-sm btn-primary"
                    (click)="addContentLayout(editContentLayoutModal);">Add section</button>
          </div>
          <table class="table table-sm table-hover ">
            <thead class="bg-light ">
            <tr>
              <th class="w-90">Title</th>
              <th class="w-10 text-center">Delete</th>
            </tr>
            </thead>
            <tbody dragula="ARTICLE-VAMPIRES" [(dragulaModel)]="data['data']">
            <tr draggable *ngFor="let listItem of data.data; index as i" class="pointer-cursor">
              <td (click)="openEditContentLayout(editContentLayoutModal, listItem)">{{listItem.title}}</td>
              <td class="text-center">
                <a href="javascript:void(0)" (click)="deleteItem(i)"><i class="fa fa-trash"></i></a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


<ng-template #editContentLayoutModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Edit Content</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="container">
      <form [formGroup]="layoutFormContainer">
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" >Title</span>
                </div>
                <input type="text" class="form-control" formControlName="title">
              </div>
            </div>

            <div class="row">
              <quill-editor format="html" formControlName="content" class="h-100"></quill-editor>
            </div>
          </div>
          <div class="col-4">

而不是` ，但没有帮助-> 保存

article.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ImageUploaderOptions, FileQueueObject } from 'ngx-image-uploader';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.scss']
})
export class ArticleComponent implements OnInit {

  selectedSection: any;
  @Input() data: any;
  layoutFormContainer: FormGroup;
  uploadedImageUrl: any;

options: ImageUploaderOptions = {
        uploadUrl: 'http://46.101.253.10:3000/upload',
        allowedImageTypes: ['image/png', 'image/jpeg','video/mp4','application/pdf'],
        maxImageSize: 500
      };


  constructor(private modalService: NgbModal,
              private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.layoutFormContainer = this.formBuilder.group({
      title: ['' , Validators.required],
      content: ['' , Validators.required],
      image: ['' , [Validators.required, Validators.email]]
    });
  }

  openEditContentLayout(content: any, itemContent: any) {
    console.log(itemContent.image)
    this.selectedSection = itemContent;
    this.uploadedImageUrl = null;
    console.log(this.selectedSection);
    this.layoutFormContainer.patchValue({
      title: itemContent.title,
      content: itemContent.content,
      image: itemContent.image
    });
    this.modalService.open(content, { size: 'lg' }).result.then(() => {
      this.selectedSection.title = this.layoutFormContainer.get('title').value;
      this.selectedSection.content = this.layoutFormContainer.get('content').value;
      this.selectedSection.image = this.uploadedImageUrl ?
        this.uploadedImageUrl : this.layoutFormContainer.get('image').value;
    }, () => {
    });
  }

  addContentLayout(content: any) {
    this.data.data.push({
      title: 'Title',
      content: 'Body'
    });
    this.openEditContentLayout(content, this.data.data[this.data.data.length - 1]);
  }

  deleteItem(index: number) {
    if (confirm('Are you sure you want to delete this item?')) {
      this.data.data.splice(index, 1);
    }
  }

  onUpload(file: FileQueueObject) {
    if (file.response && file.response['body'] && file.response['body']['url']) {
      this.uploadedImageUrl = file.response['body']['url'];
    }
  }

}

appContent.service.ts ：

import { Injectable } from '@angular/core';
import {AppConstants} from '@app/core/appConstants.service';
import {AppContentHttpService} from '@app/app-content/appContent.http.service';


@Injectable()
export class AppContentService {

  _appContent: any;
  _selectedPageContent: any;
  _selectedCategory: any;
  /**The goal is to disable or not the button Menu List */
  disabled:boolean;
  /**buttons of each category */
  question:boolean;
  // petitionsNationales, petitionsLocales or Motions 
  petitionMotion:boolean;
  //media
  media:boolean;
  //Actialites
  actualites:boolean;
  //menuList:
  constructor(private appContentHttp: AppContentHttpService,
              private appConstants: AppConstants) {
  }
  /**
   * Get data of all categories from api deponds on the language(fr,ar, en) and the userGroup(individual,association)
   */

  syncData() {
    this.appContentHttp.getAppContent(this.appConstants.language, this.appConstants.userGroup)
      .subscribe(data => {
        this._appContent = data;
        console.log(data)
    });
  }

  saveData() {
    this.appContentHttp.saveAppContent(
      this.appConstants.language,
      this.appConstants.userGroup,
      this._appContent
    )
      .subscribe();
  }

  /**
   * That method that is launched when the side menu is clicked
   * @param key 
   */
  selectCategory(key: string) {
    console.log("key " +key)
    if(key=="questionsAnswers"){
      this.question=true;
      this.petitionMotion=false;
      this.actualites=false;
    }
    else if (key=="motions" || key=="petitionsNationales" || key=="petitionsLocales") {
      this.question=false;
      this.petitionMotion=true;
      this.media=false;
      this.actualites=false;
    } else if (key=="media"){
      this.question=false;
      this.petitionMotion=false;
      this.media=true;
      this.actualites=false;
    }else if(key=="actualites") {
      console.log("toto")
      this.actualites=true;
      this.question=false;
      this.media=false;
      this.petitionMotion=false;
    } else{

    }
    this._selectedPageContent = null;
    /**if(this._appCpntent) {this._selectedCategory = this._appContent[key]} else this._selectedCategory = {} */
    this._selectedCategory = this._appContent ? this._appContent[key] : {};
    this.disabled=false;

  }

  /**
   * That method displays the content if we click on article element, menu list or quiz of categories
   * @param index 
   */
  selectPageContent(index: number) {
    //TODO : why there was two similar conditions (this._selectedCategory && this._selectedCategory) 
    this._selectedPageContent = (this._selectedCategory) ? this._selectedCategory.data[index] : {};
    /**equal true because we need to disable the button menu list of the menu list (category)
     * in order to avoid to add it again when we click on menu list of the menu list of each category.
     * Here the main idea is to add only one menu list for each category (A category is in the form of menu list)
     */
    this.disabled=true;
    console.log("_selectedPageContent:"+this._selectedPageContent)
  }

  get appSelectedPageContent(): any {
    return this._selectedPageContent;
  }
  get appSelectedCategory(): any {
    return this._selectedCategory;
  }
  get appContent(): any {
    return this._appContent;
  }

  get isDisabled(): boolean {
    return this.disabled;
  }
}

但是我的控制台出现此错误，听起来好像无法加载，请看下面的图片

当我想上传视频或PDF文件时，出现此错误

当我刷新页面时，我得到了这个而不是第一个错误，但是我想他们说的是同一件事：

我保存了数据，检查后发现视频已上传。现在的问题是它无法加载视频或文档，而不是保存数据后加载良好的图像。请看看我的控制台：

能帮我吗！

无法加载媒体文件

0 个答案: