我正在尝试使用aspnetboilerplate .net core和angular spa构建文件上传。我是框架的新手，非常喜欢它但无法使文件上传工作。
首先，如果这可以在没有控制器的服务中完成，这将是我的首选解决方案。
目前我正在尝试使用下面的代码的控制器，但它不起作用
这是上传文件的.ts组件方法。
upload(files) {
if (files.length === 0)
return;
const formData = new FormData();
for (let file of files)
formData.append(file.name, file);
const uploadReq = new HttpRequest('POST', `api/FileUpload/UploadFile`, formData, {
reportProgress: true,
});
this.http.request(uploadReq).subscribe(event => {
if (event.type === HttpEventType.UploadProgress)
this.progress = Math.round(100 * event.loaded / event.total);
else if (event.type === HttpEventType.Response)
this.reqMessage = event.body.toString();
});
}
我将控制器放在myapp web主机控制器文件夹中（防伪控制器所在的文件夹）
这是我的控制器
[Route("api/[controller]")]
[ApiController]
public class FileUploadController : myappControllerBase
{
private IHostingEnvironment _hostingEnvironment;
public FileUploadController(IHostingEnvironment hostingEnvironment)
{
_hostingEnvironment = hostingEnvironment;
}
[HttpPost, DisableRequestSizeLimit]
public ActionResult UploadFile()
{
try
{
var file = Request.Form.Files[0];
string folderName = "Upload";
string webRootPath = _hostingEnvironment.WebRootPath;
string newPath = Path.Combine(webRootPath, folderName);
if (!Directory.Exists(newPath))
{
Directory.CreateDirectory(newPath);
}
if (file.Length > 0)
{
string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
string fullPath = Path.Combine(newPath, fileName);
using (var stream = new FileStream(fullPath, FileMode.Create))
{
file.CopyTo(stream);
}
}
return Json("Upload Successful.");
}
catch (System.Exception ex)
{
return Json("Upload Failed: " + ex.Message);
}
}
}
不确定formData是否设置正确但它没有到达我的控制器。
查看上传个人资料图片的示例代码...
UploadProfilePicture（）控制器方法：
public class FileUploadController : myappControllerBase
{
public UploadProfilePictureOutput UploadProfilePicture()
{
try
{
var profilePictureFile = Request.Form.Files.First();
//Check input
if (profilePictureFile == null)
{
throw new UserFriendlyException("An error occurred!");
}
if (profilePictureFile.Length > 9999999) //change the max value
{
throw new UserFriendlyException("Picture exceeds max size!));
}
byte[] fileBytes;
using (var stream = profilePictureFile.OpenReadStream())
{
fileBytes = stream.GetAllBytes();
}
//Save new picture
var fileInfo = new FileInfo(profilePictureFile.FileName);
var tempFileName = Guid.NewGuid().ToString() + fileInfo.Extension;
var tempFilePath = Path.Combine(@"c:\temp\upload", tempFileName);
System.IO.File.WriteAllBytes(temp1FilePath, fileBytes);
using (var bmpImage = new Bitmap(tempFilePath))
{
return new UploadProfilePictureOutput
{
FileName = tempFileName,
Width = bmpImage.Width,
Height = bmpImage.Height
};
}
}
catch (UserFriendlyException ex)
{
return new UploadProfilePictureOutput(new ErrorInfo(ex.Message));
}
}
}
}
UploadProfilePictureOutput.cs：
public class UploadProfilePictureOutput : ErrorInfo
{
public string FileName { get; set; }
public int Width { get; set; }
public int Height { get; set; }
public UploadProfilePictureOutput()
{
}
public UploadProfilePictureOutput(ErrorInfo error)
{
Code = error.Code;
Details = error.Details;
Message = error.Message;
ValidationErrors = error.ValidationErrors;
}
}
角度方面：
import { IAjaxResponse } from '@abp/abpHttpInterceptor';
import { TokenService } from '@abp/auth/token.service';
import { Component, Injector, ViewChild } from '@angular/core';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ProfileServiceProxy, UpdateProfilePictureInput } from '@shared/service-proxies/service-proxies';
import { FileUploader, FileUploaderOptions } from 'ng2-file-upload';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
@Component({
selector: 'changeProfilePictureModal',
templateUrl: './change-profile-picture-modal.component.html'
})
export class ChangeProfilePictureModalComponent extends AppComponentBase {
@ViewChild('changeProfilePictureModal') modal: ModalDirective;
public active = false;
public uploader: FileUploader;
public temporaryPictureUrl: string;
public saving = false;
private maxProfilPictureBytesUserFriendlyValue = 5;
private temporaryPictureFileName: string;
private _uploaderOptions: FileUploaderOptions = {};
constructor(
injector: Injector,
private _profileService: ProfileServiceProxy,
private _tokenService: TokenService
) {
super(injector);
}
initializeModal(): void {
this.active = true;
this.temporaryPictureUrl = '';
this.temporaryPictureFileName = '';
this.initFileUploader();
}
show(): void {
this.initializeModal();
this.modal.show();
}
close(): void {
this.active = false;
this.imageChangedEvent = '';
this.uploader.clearQueue();
this.modal.hide();
}
imageChangedEvent: any = '';
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCroppedFile(file: File) {
var files: File[] = [file];
this.uploader.clearQueue();
this.uploader.addToQueue(files);
}
initFileUploader(): void {
this.uploader = new FileUploader({ url: "http://localhost:22742/Profile/UploadProfilePicture' });
this._uploaderOptions.autoUpload = false;
this._uploaderOptions.authToken = 'Bearer ' + this._tokenService.getToken();
this._uploaderOptions.removeAfterUpload = true;
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
};
this.uploader.onSuccessItem = (item, response, status) => {
const resp = <IAjaxResponse>JSON.parse(response);
if (resp.success) {
this.updateProfilePicture(resp.result.fileName);
} else {
this.message.error(resp.error.message);
}
};
this.uploader.setOptions(this._uploaderOptions);
}
updateProfilePicture(fileName: string): void {
const input = new UpdateProfilePictureInput();
input.fileName = fileName;
input.x = 0;
input.y = 0;
input.width = 0;
input.height = 0;
this.saving = true;
this._profileService.updateProfilePicture(input)
.pipe(finalize(() => { this.saving = false; }))
.subscribe(() => {
abp.event.trigger('profilePictureChanged');
this.close();
});
}
save(): void {
this.uploader.uploadAll();
}
}
注意：不要忘记在您的ajax上传中添加bearer token。此外，您需要向生产中的IIS中的物理上载目录授予写入权限。