![](/img/trans.png)
[英]Error after updating angular 7 to angular 10 - AspNetBoilerplate
[英]Aspnetboilerplate Angular File Upload
我正在嘗試使用aspnetboilerplate .net核心和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上傳中。 另外,您需要在生產環境中向IIS中的物理上載目錄授予寫權限。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.