使用asp.net web api和knockout js从数据库中存储和检索图像

Question

我的实体

public class Agent
    {
        [Key]
        [JsonProperty(PropertyName = "agentId")]
        public int AgentId { get; set; }
        [JsonProperty(PropertyName = "codeName")]
        public string CodeName { get; set; }
        [JsonProperty(PropertyName = "firstName")]
        public string FirstName { get; set; }
        [JsonProperty(PropertyName = "lastName")]
        public string LastName { get; set; }
        [JsonProperty(PropertyName = "imagePath")]
        public string ImagePath { get; set; }
        [JsonProperty(PropertyName = "description")]
        public string Description { get; set; }        
    }

我的视图模型

public class AgentVm
    {
        public int AgentId { get; set; }
        public string CodeName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ImagePath { get; set; }
        public string Description { get; set; }
    }

我的获取 web api 控制器

public IQueryable<AgentVm> GetAgents()
    {
        var agents = from b in db.Agents
            select new AgentVm()
            {
                AgentId = b.AgentId,
                FirstName = b.FirstName,
                LastName = b.LastName,
                CodeName = b.CodeName,
                ImagePath = b.ImagePath

            };
        return agents;
    }

我的帖子网络 api 控制器

public async Task<HttpResponseMessage> PostAgent(Agent agent)
{
                if (agent != null)
    {
        // Extract the image from the image string
        string regEx = "data:(.+);base64,(.+)";
        Match match = Regex.Match(agent.ImagePath, regEx);

        if (match.Success)
        {
            // Get the content-type of the file and the content
            string imageType = match.Groups[1].Value;
            string base64image = match.Groups[2].Value;

            if (imageType != null && base64image != null)
            {
                // Verify the content-type is an image
                string imageRegEx = "image/(.+)";
                match = Regex.Match(imageType, imageRegEx);

                if (match.Success)
                {
                    // Get the file extension from the content-type
                    string fileExtension = match.Groups[1].Value;
                    // Get the byte-array of the file from the base64 string
                    byte[] image = Convert.FromBase64String(base64image);

                    string path = HttpContext.Current.Server.MapPath("~/images");
                    string fileName = agent.FirstName + agent.LastName;

                    // Generate a unique name for the file (add an index to it if it already exists)                                                        
                    string targetFile = fileName + "." + fileExtension;
                    int index = 0;
                    while (File.Exists(Path.Combine(path, targetFile)))
                    {
                        index++;
                        targetFile = fileName + index + "." + fileExtension;
                    }

                    // Write the image to the target file, and update the agent with the new image path
                    File.WriteAllBytes(Path.Combine(path, targetFile), image);
                    agent.ImagePath = "images/" + targetFile;

                    db.Agents.Add(agent);
                    await db.SaveChangesAsync();

                    // Create the Location http header
                    var response = Request.CreateResponse(HttpStatusCode.Created, agent);
                    string uri = Url.Link("GetAgent", new { id = agent.AgentId});
                    response.Headers.Location = new Uri(uri);

                    return response;
                }

            }

        }
    }
    throw new HttpResponseException(Request.CreateErrorResponse(
  HttpStatusCode.BadRequest, "Could not deserialize agent"));
}

这是我的 js

var ViewModel = function() {
    var self = this;
    self.agents = ko.observableArray();
    self.error = ko.observable();

    self.agent = ko.observableArray();
    self.newAgent = {
        FirstName: ko.observable(),
        LastName: ko.observable(),
        CodeName: ko.observable(),
        Description: ko.observable(),
        ImagePath: ko.observable()
    }

    var agentsUrl = "/api/agents/";

    function ajaxHelper(uri, method, data) {
        self.error(""); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: "json",
            contentType: "application/json",
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllAgents() {
        ajaxHelper(agentsUrl, "GET").done(function (data) {
            self.agents(data);
        });
    }

    self.addAgent = function (formElement) {
        var agent = {
            AgentId: self.newAgent.Agent().AgentId,
            FirstName: self.newAgent.FirstName(),
            LastName: self.newAgent.LastName(),
            CodeName: self.newAgent.CodeName(),
            Description: self.newAgent.Description(),
            ImagePath: self.newAgent.ImagePath()
        };

        ajaxHelper(agentsUrl, 'POST', agent).done(function (item) {
            self.agents.push(item);
        });
    }

    getAllAgents();
};

ko.applyBindings(new ViewModel());

这是我的图像元素

<img data-bind="attr:{ src: ImagePath }"/>

但是图片没有显示，我不知道要添加上传， 请有人帮忙，我不需要 angular，只是一个简单的 mvvm，例如淘汰赛 js，但它相对较新。

Answer 1

使用 Chrome 控制台或 firefox 中的 Firebug（特别是 src 属性）查看生成的 <img> 元素。然后将 URL 复制到新选项卡中并检查其是否显示。我认为您的问题是元素渲染正确，但您的项目无法渲染直接图像，因为 MVC 将尝试使用路由逻辑来查找您请求的控制器/操作，返回 HTTP 404。Check this response for a solution

您可以创建一个简单的表单来上传文件，或者如果您想使用 ajax，您可以使用 jquery $.post。 Here is a sample for that