Question

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

Screenshot

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中的额外引号（＆＃34;）。

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

    }

Output

图像显示来自数据库

2 个答案: