从数据库中显示错误的图像

Question

在我的应用程序中最近发生的更改之后，仍然在使用数据库中的相对路径显示图像时出现此问题。 Error: 404 NOT FOUND http://localhost:1256/Empdet/%22/Photos/jobs.jpg%22

Controller.js：

$scope.UploadFile = function() { 
    console.log('UploadFile'); 
    console.log($scope.Empdet.PhotoFile); 
    var file = $scope.Empdet.PhotoFile; 
    console.log('file is ' + JSON.stringify(file)); 
    var uploadUrl = "../Photos"; 
    console.log('before file upload'); 
    EmployeeFactory.UploadFile(file, uploadUrl).success(function (response) { 
     $scope.Empdet.PhotoText = response; 
     console.log('$scope.Empdet.PhotoText'); 
     console.log(response); 
    }).error(function() { 
     console.log('error'); 
    }); 
    console.log('after file upload'); 
}; 

service.js：

service.UploadFile = function (file, uploadUrl) { 
    var fd = new FormData(); 
    fd.append('file', file); 
    return $http.post('/Empdet/UploadFile', fd, { 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }); 
} 

EmpdetController.cs：

个

[HttpPost] 
    public ActionResult UploadFile() 
    { 
     var file = Request.Files[0]; 
     var path = Path.Combine(Server.MapPath("~/Photos/"), file.FileName); 
     file.SaveAs(path); 

     // prepare a relative path to be stored in the database and used to display later on. 
     var filename = Url.Content("~/Photos/" + file.FileName); 
     // save to db 
     return Json(filename.ToString(), JsonRequestBehavior.AllowGet); 

    } 

Answer 1

从你的函数中取出.toString()的FileName属性已经返回一个字符串。

[HttpPost] 
    public ActionResult UploadFile() 
    { 
     var file = Request.Files[0]; 
     var path = Path.Combine(Server.MapPath("~/Photos/") + file.FileName); 
     file.SaveAs(path); 

     // prepare a relative path to be stored in the database and used to display later on. 
     string filename = Url.Content("~/Photos/" + file.FileName); 
     // save to db 
     return Json(filename, JsonRequestBehavior.AllowGet); 

    } 

解析你的控制器的回报。这应该摆脱你的URL中的额外引号（“）

Answer 2

controller.js：

$scope.UploadFile = function() { 
    console.log('UploadFile'); 
    console.log($scope.Empdet.PhotoFile); 
    var file = $scope.Empdet.PhotoFile; 
    console.log('file is ' + JSON.stringify(file)); 
    var uploadUrl = '/Empdet/UploadFile'; 
    console.log('before file upload'); 
    EmployeeFactory.UploadFile(file, uploadUrl).success(function (response) { 
     console.log(JSON.parse(response)); 
     console.log('$scope.Empdet.PhotoText'); 
     $scope.Empdet.PhotoText = JSON.parse(response); 

    }).error(function() { 
     console.log('error'); 
    }); 
    console.log('after file upload'); 
}; 

EmpdetController.cs：

[HttpPost] 
    public ActionResult UploadFile() 
    { 
     var file = Request.Files[0]; 
     var path = Path.Combine(Server.MapPath("~/Photos/") + file.FileName); 
     file.SaveAs(path); 

     // prepare a relative path to be stored in the database and used to display later on. 
     string filename = Url.Content("~/Photos/" + file.FileName); 
     // save to db 
     return Json(filename, JsonRequestBehavior.AllowGet); 

    }