Angular 1.2.10-Breeze-.Net 4.5-使用表单上传文件
[英]Angular 1.2.10 - Breeze - .Net 4.5 - File Upload with form
问题描述
Hi All,
我的环境：Angular 1.2.10-Breeze-.Net-实体框架ADO .Net 6.0
我已经看到了很多文件上传（单独）的帖子，例如https://github.com/danialfarid/angular-file-upload我试图在所有表单中上传文件，但是没有成功。
你有什么主意吗？
我正在角度侧做mvvm，它给出了：
角度-html：
<section id="register-view" class="mainbar" data-ng-controller="register as vm">
<form name="RegisterForm" ng-submit="submit()" data-n ng-controller="vm.Ctrl">
<section class="matter">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="today-datas">
<li class="blightblue">
<div class="pull-left"><i class="fa fa-plane"></i></div>
<div class="datas-text pull-right">
<span class="bold">11, 12, 13 Février 2014<br />Microsoft Techdays, France</span>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="widget wviolet">
<div data-cc-widget-header title="{{vm.title}}"
allow-collapse="true"></div>
<div class="widget-content text-center text-info">
<table class="table table-condensed table-striped">
<tbody>
<tr>
<td>Nom utilisateur</td>
<td><input ng-model="vm.user.UserName" required /></td>
<td></td>
</tr>
<tr>
<td>Mot de passe</td>
<td><input ng-model="vm.user.Membership.Password" required type="password" /></td>
<td></td>
</tr>
<tr>
<td>Confirmation mot de passe</td>
<td><input ng-model="vm.user.Membership.ConfirmPassword" required type="password" /></td>
<td></td>
</tr>
<tr>
<td>Photo <strong>(facultatif)</strong></td>
<td>
<!--<input ng-model="vm.user.Photo" type="file" />-->
<div ng-controller="vm.CtrlPhoto">
<input type="file" id="fileToUpload" ng-file-select="onFileSelect($files)" />
</div>
<!--<div id="dropbox" class="dropbox" ng-class="dropClass"><span>Drop files here...</span></div>-->
</td>
<td></td>
</tr>
<tr>
<td>Prénom</td>
<td><input ng-model="vm.user.FirstName" required /></td>
<td></td>
</tr>
<tr>
<td>Nom</td>
<td><input ng-model="vm.user.LastName" required /></td>
<td></td>
</tr>
<tr>
<td>Email</td>
<td><input ng-model="vm.user.Membership.Email" required type="email" /></td>
<td></td>
</tr>
<tr>
<td>Téléphone <strong>(facultatif)</strong></td>
<td><input ng-model="vm.user.Phone" type="tel" /></td>
<td></td>
</tr>
<tr>
<td>Date de naissance <strong>(facultatif)</strong></td>
<td>
<!--<input ng-model="vm.user.Phone" type="tel" />-->
<select>
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
</select>
<select>
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avril</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Position</td>
<td><textarea ng-model="vm.user.Position" wrap="hard" rows="5" cols="60" /></td>
<td></td>
</tr>
<tr>
<td>Intérêts</td>
<td><textarea ng-model="vm.user.Interests" rows="5" cols="60" /></td>
<td><input type="submit" id="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-6" />
</div>
</div>
</section>
</form>
</section>
js viewModel：
(function () {
'use strict';
var controllerId = 'register';
angular.module('app').controller(controllerId, ['common', 'datacontext', 'entityManagerFactory', register]);
function register(common, datacontext, entityManagerFactory) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
vm.title = 'Register';
vm.Ctrl = Ctrl;
vm.CtrlPhoto = CtrlPhoto;
var user = {
ApplicationId: "1",
UserId: "",
UserName: "",
LoweredUserName: "",
MobileAlias: "",
IsAnonymous: false,
LastActivityDate: "",
FirstName: "",
LastName: "",
BirthDate: "",
CountryCode: "",
Phone: "",
Photo: "",
PathPhoto: "",
Position: "",
Interests: "",
Application: "",
Membership: {
ApplicationId: "1",
UserId: "",
Password: "",
PasswordFormat: "",
PasswordSalt: "",
MobilePIN: "",
Email: "",
LoweredEmail: "",
PasswordQuestion: "",
PasswordAnswer: "",
IsApproved: "",
IsLockedOut: "",
CreateDate: "",
LastLoginDate: "",
LastPasswordChangedDate: "",
LastLockoutDate: "",
FailedPasswordAttemptCount: "",
FailedPasswordAttemptWindowStart: "",
FailedPasswordAnswerAttemptCount: "",
FailedPasswordAnswerAttemptWindowStart: "",
Comment: "",
Application: "",
User: ""
},
Missions: "",
PersonalizationPerUsers: "",
Profile: "",
WebpagesOAuthMemberships: "",
Roles: "",
PostedFile: ""
};
vm.user = user;
activate();
function activate() {
common.activateController(null, controllerId)
.then(function () {
log('Activated Register View');
});
}
function CtrlPhoto($scope) {
$scope.onFileSelect = function ($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
vm.user.PostedFile = file;
//$scope.upload = $upload.upload({
// url: '/IdPhoto', //upload.php script, node.js route, or servlet url
// // method: POST or PUT,
// // headers: {'headerKey': 'headerValue'},
// // withCredential: true,
// data: vm.myModelObj,
// file: file,
// // file: $files, //upload multiple files, this feature only works in HTML5 FromData browsers
// /* set file formData name for 'Content-Desposition' header. Default: 'file' */
// //fileFormDataName: myFile, //OR for HTML5 multiple upload only a list: ['name1', 'name2', ...]
// /* customize how data is added to formData. See #40#issuecomment-28612000 for example */
// //formDataAppender: function(formData, key, val){} //#40#issuecomment-28612000
//}).progress(function (evt) {
// console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
//}).success(function (data, status, headers, config) {
// // file is uploaded successfully
// console.log(data);
//});
//.error(...)
//.then(success, error, progress);
}
}
}
function Ctrl($scope) {
$scope.submit = function () {
//vm.user.Photo = document.getElementById("fileToUpload");
datacontext.Register(vm.user)
//.then(loadFile($upload))
.then(common.logger.log("File posted"))
.catch(failCallback)
//$upload.upload({
// url: '~/IdPhoto',
// file: vm.user.PathPhoto // for single file
//})
//.then(function (data) {
// vm.user.PathPhoto.fileId = data;
//})
};
function loadFile($upload) {
//var fd = new FormData();
var fileToUpload = document.getElementById("fileToUpload");
//fd.append("uploadedFile", fileToUpload);
//var xhr = new XMLHttpRequest();
//xhr.open("POST", '/IdPhoto');
//xhr.send(fd)
$upload.upload({
url: '/IdPhoto',
file: fileToUpload,
}).then(function (data, status, headers, config) {
// file is uploaded successfully
//console.log(data);
}).catch(failCallback(error));
}
}
function failCallback(error) {
var msg = 'Error Posting File ' + error.message;
common.logger.logError(msg, error);
throw error;
}
}
})();
在ApiController-BreezeController方面，post方法给出：
[System.Web.Http.AcceptVerbs("POST")]
//[HttpPost]
public string Register(User user)
{
System.Web.Security.MembershipCreateStatus status = MembershipCreateStatus.UserRejected;
//pour les nouvelles inscriptions il n'y a pas de nwpassword et de confirmnewpassword
//ModelState.Remove("user.Membership.NewPassword");
//ModelState.Remove("user.Membership.ConfirmNewPassword");
//if (ModelState.IsValid)
//{
// Tentative d'inscription de l'utilisateur
try
{
CVAppMembershipProvider provider = (CVAppMembershipProvider)System.Web.Security.Membership.Providers["CVAppMembershipProvider"];
var httpContext = (HttpContextWrapper)Request.Properties["MS_HttpContext"];
var foo = httpContext.Request.Form["Foo"];
MembershipUser usr = provider.CreateUser(user, out status);
if (status == MembershipCreateStatus.Success)
{
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1,
usr.UserName,
DateTime.Now,
DateTime.Now.AddMonths(1),
false,
"", //userData
FormsAuthentication.FormsCookiePath);
////Encrypt the ticket.
string encTicket = FormsAuthentication.Encrypt(ticket);
var resp = new HttpResponseMessage();
//create and set cookie in response
var cookie = new CookieHeaderValue(FormsAuthentication.FormsCookieName, encTicket);
cookie.Expires = DateTimeOffset.Now.AddMonths(1);
cookie.Domain = Request.RequestUri.Host;
cookie.Path = "/";
resp.Headers.AddCookies(new CookieHeaderValue[] { cookie });
}
else
{
ModelState.AddModelError(status.ToString(), GetErrorMessage(status));
}
}
catch (Exception e)
{
ModelState.AddModelError("", e.Message);
}
//}
return status.ToString();
}
在这个post方法中，我想对viewModel花费的用户（JSon Format）进行一些处理，这是可以的。 同时，我想从表单上传文件（从角度表单元素'fileToUpload'）。 可能吗 ？
在互联网上找到的所有示例均未给出答案。
我想序列化的Json格式无法使用该文件。
XML序列化会有所帮助吗？
任何更简单的解决方案？
提前感谢您的帮助
1 个解决方案
解决方案1
0 2014-02-10 09:46:32
我找到了解决问题的方法。 它只包含上载文件，将用户花费到上载文件（更改名称==>注册），它在datacontext（javascript）中给出：
function Register($upload, user, postedFile) {
return $q.when(
$upload.upload({
url: 'CVApp/User/Register', //upload.php script, node.js route, or servlet url
method: 'POST',
// headers: {'headerKey': 'headerValue'},
// withCredential: true,
data: user,
file: postedFile,
// file: $files, //upload multiple files, this feature only works in HTML5 FromData browsers
/* set file formData name for 'Content-Desposition' header. Default: 'file' */
//fileFormDataName: myFile, //OR for HTML5 multiple upload only a list: ['name1', 'name2', ...]
/* customize how data is added to formData. See #40#issuecomment-28612000 for example */
//formDataAppender: function(formData, key, val){} //#40#issuecomment-28612000
}
)
.then(successCallback)
.catch(failCallback) // same as 'then(null, failCallback)'
.finally(finalCallback) // sort of like 'then(finalCallback, finalCallback)'
);
}
在服务器端，它提供了ApiController：
[System.Web.Http.AcceptVerbs("POST")]
public async Task<HttpResponseMessage> Register()
{
// Check if the request contains multipart/form-data.
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/IdPhoto");
var provider = new MultipartFormDataStreamProvider(root);
try
{
// Read the form data.
await Request.Content.ReadAsMultipartAsync(provider);
User user = new User(provider.FormData);
System.Web.Security.MembershipCreateStatus status = MembershipCreateStatus.UserRejected;
CVAppMembershipProvider mProvider = (CVAppMembershipProvider)System.Web.Security.Membership.Providers["CVAppMembershipProvider"];
MembershipUser usr = mProvider.CreateUser(user, out status);
if (status == MembershipCreateStatus.Success)
{
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1,
usr.UserName,
DateTime.Now,
DateTime.Now.AddMonths(1),
false,
"", //userData
FormsAuthentication.FormsCookiePath);
////Encrypt the ticket.
string encTicket = FormsAuthentication.Encrypt(ticket);
var resp = new HttpResponseMessage();
//create and set cookie in response
var cookie = new CookieHeaderValue(FormsAuthentication.FormsCookieName, encTicket);
cookie.Expires = DateTimeOffset.Now.AddMonths(1);
cookie.Domain = Request.RequestUri.Host;
cookie.Path = "/";
resp.Headers.AddCookies(new CookieHeaderValue[] { cookie });
}
else
{
throw new Exception(status.ToString() + " - " + GetErrorMessage(status));
}
// This illustrates how to get the file names.
foreach (MultipartFileData file in provider.FileData)
{
string fileName = file.Headers.ContentDisposition.FileName;
if (fileName.StartsWith("\"") && fileName.EndsWith("\""))
{
fileName = fileName.Trim('"');
}
if (fileName.Contains(@"/") || fileName.Contains(@"\"))
{
fileName = Path.GetFileName(fileName);
}
fileName = user.UserName.Replace(" ", "_") + "." + fileName.Substring(fileName.IndexOf(".") + 1);
File.Copy(file.LocalFileName, Path.Combine(root, fileName));
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (Exception e)
{
//return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
throw e;
}
}
等等！ 有用。
现在，我只需要在处理时使用“ BusyIndicator”，最后才有错误/正确的消息，并能够按我想要的顺序执行异步方法即可（如果可能，我认为“那么”可以做到），我仍在搜索，我想我会很快在Internet上找到它。
谢谢
Asp.Net MVC + Breeze + Angular是否可以一起工作？
[英]Is it possible Asp.Net MVC + Breeze + Angular working together?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
.NET 4.5 HttpTaskAsyncHandler上传文件
将文件从 Angular 上传到 .Net
在.NET 1.1和2.0上运行的Log4net 1.2.10不兼容
Asp.Net MVC + Breeze + Angular是否可以一起工作？
ETW EventSource .NET 4.5的滚动文件
C# HttpClient 4.5 multipart/form-data 上传
如何从Angular Reactive Form接收文件上传？
需要使用 angular 中的 mat 表单字段上传文件
无法将文件从Angular 8上传到Asp.net Core 2.2
如何制作带有文件上传的 Asp.Net Core 表单？
相关标签