标签: ng2-file-upload

我试图将ng2-file-upload模块集成到我的应用程序中.

我得到这个模板错误:无法绑定到'uploader',因为它不是'input'的已知属性

UPDATE文件夹str:

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

在layout.module.ts中

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

在category-items.module.ts中

import { CategoryItemsComponent } from './category-items.component';

import {FileUploadModule} from "ng2-file-upload";   

imports: [  ...FileUploadModule ... ]   

应用程序\ app.module.ts

 import {FileUploadModule} from "ng2-file-upload";   

 imports: [  ...FileUploadModule ... ]  

应用程序\分量\布局\类别的项目\类别的items.component.ts

import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public …

我在角度4使用ng2-file-upload.有没有办法从服务器返回自定义数据？我们如何在ts文件中访问它？

我遇到了麻烦uploading multiple file to different urls using ng2-file-upload method.

我正在使用这个repo https://github.com/valor-software/ng2-file-upload 来实现这个目标.ng2-file-upload使用此演示轻松集成到我的应用程序中上传文件.此外,他们还提供了一种在特定网址上传多个文件的方法.

但我想上传different files at different url,我还没有找到.

// sample code
import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

const URL = '/api/some_url';

@Component({
  selector: 'simple-demo',
  templateUrl: './simple-demo.html'
})
export class SimpleDemoComponent {
  public uploader:FileUploader = new FileUploader({url: URL}); // here to add url
}

这FileUploader提供url了上传文件的方法.该方法的有用之处在于,progress-bar相关特征与该ng2-file-uploader组件集成在一起.我搜索了很多,但无法找到任何上传到不同网址的解决方案.

任何有用的建议将不胜感激!

我正在使用ng2-File-upload,我想读取excel文件及其所有行并获得总计数.有什么办法可以通过使用这个模块来实现它,以及如何通过纯JavaScript或打字稿来完成它.

我正在使用ng2-file-upload来管理我的Angular 6应用程序中的文件上传。我想要实现的是能够使用同一个uploader:FileUploader对象上传多个文件，但每个文件都应该有不同的 URL。

public uploader: FileUploader = new FileUploader();

<div ng2FileDrop
           [ngClass]="{'dz-file-over': hasBaseDropZoneOver}"
           (fileOver)="fileOverBase($event)"
           [uploader]="uploader"
           class="fileupload-drop-zone">
        Drop required files here
</div>

我可以在onBeforeUploadItem每个文件上传之前更改它的 URL。

this.uploaderCustomerIdentificaiton.onBeforeUploadItem = (fileItem): any => {
  fileItem.url = newUrl;
  return {fileItem};
};

对于我需要上传的每个文件，我都会有单独的（注意它是同一个上传对象）。

<div ng2FileDrop [uploader]="uploader"....</div>

所以每个ng2FileDrop应该有一个不同的 URL。

我在使用ng2-file-upload 时遇到了一个小问题， 我试图阻止用户两次上传/使用同一个文件。意思是，将相同的文件添加到队列但尚未上传）。

所以我可以添加这样的文档

this.uploader = new FileUploader({
  url: this.baseUrl + 'claim/document/' + this.claim.id,
  authToken: 'Bearer ' + localStorage.getItem('token'),
  // allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
  maxFileSize: 15 * 1024 * 1024, // 15 MB
  // headers: [{name:'Accept', value:'application/json'}],
  isHTML5: true,
  autoUpload: false,
});

this.uploader.onAfterAddingFile = fileItem => {
  fileItem.withCredentials = false;
  let docExists = false;
  for (const doc of this.claim.data.generalDocumentDto) {
    if (fileItem.file.name === doc.fileName) {
      docExists = true;
      this.alertService.warning('Document table already contains a file with name ' …

我想为我的文件上传创建一个进度条。

我使用的上传是： https: //www.npmjs.com/package/ng2-file-upload。

应用程序组件.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <input type="file" name="myFile" ng2FileSelect [uploader]="uploader" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                Upload an Image
            </button>
        </div>
    </div>
</div>

应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';

const URL = 'url to API';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'myFile' …

我正在尝试上传不同的文档。但是当我第二次选择一个文件时，问题就出现了，它被添加到 fileArray 中，它不会被替换。

例如，我为第一个输入选择了一张图片。然后我决定为相同的输入选择不同的图片，然后它会被添加到一个文件数组中，所以当我上传它时，我不想上传的前一张图片也会被上传。

是否有任何解决方案（除了使用单个按钮上传多个文件），以便当我第二次选择文件时，它将被替换而不是添加到文件数组中？

uploadDocument.html 文件：

<form (ngSubmit)=f.form.valid && formSubmit() #f="ngForm">

        <input type="file" class="form-control ml-2" name="photo" ng2FileSelect [uploader]="uploader" />
          <input type="file" class="form-control ml-2" name="document1" ng2FileSelect [uploader]="uploader" />
            <input type="file" class="form-control ml-2" name="pic2" ng2FileSelect [uploader]="uploader" />

    <button type="submit" class="btn btn-danger btn-lg btn-fill">Upload</button>

</form>

uploadDocument.component.ts 文件：

import { Component, OnInit, Renderer, ElementRef } from '@angular/core';
import { UserService } from '../_services';
import { ActivatedRoute, Router, Params} from '@angular/router';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { FileSelectDirective } from 'ng2-file-upload';

const …

我们有 2 个与选择文件和上传文件有关的问题。第一个问题是，当您上传图像时，文件名仍保留在输入中。这是代码。

OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      .catch (err => this.error = err);

  }

  Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
          this.SettingsForm.reset()
        },
        err => err
      );
    }
  }
  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        const result = reader.result;
        if (!result) reject('Cannot read variable');
        if (this.images.length>=4) reject('You can have only …

我已经使用ng2文件上传实现了文件删除。我面临的问题是，当文件被拖放到放置区域浏览器之外时会打开它。有什么办法可以防止此事件发生？角2/4