我使用的是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：
Select files
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone">
Base drop zone
Multiple
Upload queue
Queue length: {{ uploader?.queue?.length }}
| Name | Size | Progress | Status | Actions |
|---|---|---|---|---|
| {{ item?.file?.name }} | {{ item?.file?.size/1024/1024 | number:'.2' }} MB |
|
|
|
Queue progress:
后台方法：
public async Task
{
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;
}
///
/// 文件目录如果不存在，就创建一个新的目录
///
///
private void DicCreate(string path)
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
}
结语：大概就是这样子，问题就是控件自带的post请求，我加进去token依然无法验证，这也是我对abp自带的token验证没深入研究的
原因，也是懒！