Ошибка отображения изображения из базы данных

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() из вашей функции, тоСвойствоуже возвращает строку.

[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); 

    }