我正在尝试上传一张图片并在我的应用程序中显示它。我正在使用AngularJS,MVC和Web API。我的图片成功上传到文件夹。
问题是:上传后,我发送回相对路径作为HTTP响应,并将其设置为我的控制器$scope属性,这反过来我想绑定img src.我不知道这是否是正确的方式来做它或没有.请指导这是错误的或我做错了什么.
我的看法是:
<div class="profilePic">
<img src="@Url.Content(UserDetails.PrflPic)" alt="Sample Image" />
</div>
<input type="file" valid-file upload="uploadFile(file)" ng-model="file">
字符串
这里“UserDetails.PrflPic”是我的$scope属性,我想使用一些如何。但是,我不能这样做,因为Url.Content只接受字符串。我尝试了这个@Url.Content({{UserDetails.PrflPic}}),它也不好。
我的控制器方法是:
$scope.uploadFile = function (file) {
var PromiseData = UserService.uploadProfilePicture(file);
PromiseData.then(function (Response) {
alertify.alert('Image uploaded sucessfully');
$scope.UserDetails.PrflPic = Response.data;
$scope.$apply();
}, function (Error) {$scope.$apply();
alertify.alert('Some issue occurred while saving picture');
});
}
型
文件上传API为:
public IHttpActionResult Post()
{
var httpRequest = HttpContext.Current.Request;
// Check if files are available
if (httpRequest.Files.Count > 0)
{
var postedFile = httpRequest.Files[0];
var path = System.Web.Hosting.HostingEnvironment.MapPath("~/UserProfilePic/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
// Fetch the File Name.
string fileName = Path.GetFileName(postedFile.FileName);
// Save the File.
postedFile.SaveAs(path + fileName);
var ImgLoc = "~/UserProfilePic/" + fileName;
return Content(HttpStatusCode.OK, ImgLoc);
}
else
{
return BadRequest("No files to upload.");
}
}
型
2条答案
按热度按时间iecba09b1#
ng-src
指令允许您绑定src属性。字符串
67up9zun2#
请试试这个
字符串