我使用的是ng2-file-upload，网址：https://www.npmjs.com/package/ng2-file-upload
先nodejs安装到你的angular项目中，安装命令：npm i ng2-file-upload --save
app.module.ts中:
//上传
import { FileUploadModule } from 'ng2-file-upload';
@NgModule({
imports: [
FileUploadModule
]});
Component中：
import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
export class Component
{
uploader: FileUploader;
hasBaseDropZoneOver: boolean;
hasAnotherDropZoneOver: boolean;
response: string;
你的参数1: number;
constructor(）{
}
//我是在module中写的所以写在了ngOnInit方法中
ngOnInit(): void {
this.参数1= 传来的参数1;
this.uploader = new FileUploader({
//注意因为本人没有解决掉使用这个上传文件的时候，带上token验证的问题，所以自己写了一个新的接口文件，设置成了无权限
//如果您有解决掉这个问题，请留言告诉我谢谢。我下面会贴出来我得后台接收方法
url: this._common.getUrl() + "/api/services/app/ImageUpload/方法名?".replace(/[?&]$/, ""),
method: "POST",
autoUpload: false,
additionalParameter: { 参数1: this.参数1 },
formatDataFunction: async (item) => {
return new Promise((resolve, reject) => {
resolve({
name: item._file.name,
length: item._file.size,
contentType: item._file.type,
date: new Date()
});
});
}
});
this.uploader.onSuccessItem = this.successItem.bind(this);
this.hasBaseDropZoneOver = false;
this.hasAnotherDropZoneOver = false;
this.response = '';
this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
this.uploader.response.subscribe(res => this.response = res);
}
successItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
// 上传文件成功
if (status == 200) {
// 上传文件后获取服务器返回的数据
let tempRes = response;
console.log(tempRes);
} else {
// 上传文件后获取服务器返回的数据错误
console.log("错误！");
}
}
selectedFileOnChanged() {
console.log("错误2");
}
public fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e: any): void {
this.hasAnotherDropZoneOver = e;
}
}
HTML：
<div class="row clearfix">
<div class="container">
<div class="col-sm-12">
<h3>Select files</h3>
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone">
Base drop zone
</div>
</div>
</div>
<div class="container">
<div class="col-sm-12">
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br />
</div>
</div>
<div class="container">
<div class="col-sm-12">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
<th>Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.options.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs"
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs"
(click)="item.cancel()" [disabled]="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs"
(click)="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<div class="col-sm-12">
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
后台方法：
public async Task<String> GatherImageUploadPost([FromForm] IFormCollection formCollection)
{
String result = "Fail";
if (formCollection.ContainsKey("user"))
{
var user = formCollection["user"];
}
FormFileCollection fileCollection = (FormFileCollection)formCollection.Files;
//商品ID
var 参数1 = Convert.ToInt32(formCollection["参数1"]);
foreach (IFormFile file in fileCollection)
{
StreamReader reader = new StreamReader(file.OpenReadStream());
//内容
String content = reader.ReadToEnd();
//文件名称
String name = file.FileName;
String filename = null;
//获取文件后缀
var extName = name.Substring(name.LastIndexOf('.')).Replace("\"", "");
//存放文件路径拼接:
//_hostingEnvironment.WebRootPath 这是获取服务器地址的方法注入方式：
// private readonly IHostingEnvironment _hostingEnvironment
filename = _hostingEnvironment.WebRootPath + "/" + item.CategoryId + "/" + item.Id;
//检查是否存在，方法在最后面
DicCreate(filename);
string newname= DateTime.Now.ToString("yyyyMMddHHmmss") + extName;
//添加文件名
filename += "/" + newname;
//添加图片子数据，这是我的业务处理
itemImg = new ItemImg();
itemImg.ItemId = itemId;
itemImg.ImgUrl = "/" + item.CategoryId + "/" + item.Id + "/"+ newname;
await _itemImg.InsertAsync(itemImg);
}
}
//如果存在删除掉旧的
if (System.IO.File.Exists(filename))
{
System.IO.File.Delete(filename);
}
using (FileStream fs = System.IO.File.Create(filename))
{
// 复制文件
file.CopyTo(fs);
// 清空缓冲区数据
fs.Flush();
}
result = "Success";
}
return result;
}
/// <summary>
/// 文件目录如果不存在，就创建一个新的目录
/// </summary>
/// <param name="path"></param>
private void DicCreate(string path)
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
}
结语：大概就是这样子，问题就是控件自带的post请求，我加进去token依然无法验证，这也是我对abp自带的token验证没深入研究的
原因，也是懒！
网友评论