如何在 angular 中适当地更改 ng2-file-uploader 的文件名
How to appropriately change the filename for ng2-file-uploader in angular
我想通过 ng2-file-uploader 更改我在 angular 中的图像名称,然后将其传递到我的 node.js.
中的 multer
一切正常。我能够接收图像,并且它存储在服务器端的上传目录中。只是我不知道在哪里更改图像名称。我在 onCompleteItem 方法中尝试过,但没有。这是一些代码:
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
@Component({
selector: 'name',
templateUrl: './some.html',
styleUrls: [./some.css]
})
export class ComponentName {
public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });
ngOnInit(){
this.uploader.onAfterAddingFile = (file) => {};
this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
//create my name
item.file.name = "my name"
alert('File uploaded');
};
this.uploader.uploadAll();
}
}
我只想更改名称,以便我可以将它与我拥有的其他输入值一起存储在我的数据库中。
这个其实很简单。
你差一点就搞定了,只是你选错了方法。
您可以在 onAfterAddingFile
方法中更改文件名。
下面我可以给你看一些代码
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
@Component({
selector: 'name',
templateUrl: './some.html',
styleUrls: [./some.css]
})
export class ComponentName {
public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });
//new name string variable
newFileName : string;
ngOnInit(){
this.uploader.onAfterAddingFile = (file) => {
//create my name
file.file.name = "new name";
//save in variable
newFileName = file.file.name;
};
this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
alert('File uploaded');
};
this.uploader.uploadAll();
}
}
这样您就可以传递一个完整的新文件名,或者您可以使用 javascript 的字符串替换方法和正则表达式来替换文件名中的字符。
希望这对您有所帮助。
您可以使用 onAfterAddingAll
作为解决方法:
this.uploader.onAfterAddingAll = (files: FileItem[]) => {
files.forEach(fileItem => {
fileItem.file.name = fileItem.file.name.replace(/\.[^/.]+$/, "");
(<any>fileItem).previewUrl = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
});
};
我想通过 ng2-file-uploader 更改我在 angular 中的图像名称,然后将其传递到我的 node.js.
中的 multer一切正常。我能够接收图像,并且它存储在服务器端的上传目录中。只是我不知道在哪里更改图像名称。我在 onCompleteItem 方法中尝试过,但没有。这是一些代码:
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
@Component({
selector: 'name',
templateUrl: './some.html',
styleUrls: [./some.css]
})
export class ComponentName {
public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });
ngOnInit(){
this.uploader.onAfterAddingFile = (file) => {};
this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
//create my name
item.file.name = "my name"
alert('File uploaded');
};
this.uploader.uploadAll();
}
}
我只想更改名称,以便我可以将它与我拥有的其他输入值一起存储在我的数据库中。
这个其实很简单。
你差一点就搞定了,只是你选错了方法。
您可以在 onAfterAddingFile
方法中更改文件名。
下面我可以给你看一些代码
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
@Component({
selector: 'name',
templateUrl: './some.html',
styleUrls: [./some.css]
})
export class ComponentName {
public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });
//new name string variable
newFileName : string;
ngOnInit(){
this.uploader.onAfterAddingFile = (file) => {
//create my name
file.file.name = "new name";
//save in variable
newFileName = file.file.name;
};
this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
alert('File uploaded');
};
this.uploader.uploadAll();
}
}
这样您就可以传递一个完整的新文件名,或者您可以使用 javascript 的字符串替换方法和正则表达式来替换文件名中的字符。 希望这对您有所帮助。
您可以使用 onAfterAddingAll
作为解决方法:
this.uploader.onAfterAddingAll = (files: FileItem[]) => {
files.forEach(fileItem => {
fileItem.file.name = fileItem.file.name.replace(/\.[^/.]+$/, "");
(<any>fileItem).previewUrl = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
});
};