时间戳

首页 > 解决方案 > 使用 ASP.NET MVC 上传图像

c# - 使用 ASP.NET MVC 上传图像

问题描述

我正在使用 ASP.NET MVC + SQL Server 构建一个 craigslist 克隆，但我被卡住了。我不确定如何上传和存储图像。通过我的研究，将图像存储在服务器的文件系统而不是 SQL 数据库中似乎更好，但它可以作为 varbinary(MAX) 存储在 SQL 中。我的评估是否正确？

我有一个放置区，您可以在其中单击并将多个图像拖动到其中，并使用 javascript 将它们转换为 blob 数组。到目前为止，我有提交按钮使用我可以通过 Request.Form.Files 在控制器中看到的 blob 数组发出 ajax 发布请求。但是，我还想使用 ViewModel 从表单的其余部分发送其他数据。

这是创建 blob 数组并使用 ajax 发布它的 javascript：

function buildFormData() {
    //Create and build formData
    formData = new FormData();
    images.forEach((image, index) => {
        formData.append('images[]', image, 'image:' + index);
    })

    //Make post request
    $.ajax({
        url: 'Home/UploadImage',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
    });
}

function setupReader(file) {
    //console.log("File is blob? ", file instanceof Blob); -> true
    images.push(file);
    var name = file.name;
    var reader = new FileReader();
    reader.onload = function (e) {


        // Create HTML element for image (simplified)
        var previewImg = '<img class="preview-image" src="' + e.target.result + '" />'; 

        //Add img preview element to boxZone
        boxZone.append(previewImg);
    }
    reader.readAsDataURL(file);
}

function readFiles(input) {
    console.log($);
    for (var i = 0; i < input.files.length; i++) {
        setupReader(input.files[i]);
    }
    console.log("Images: ", images);

}

这似乎是一个好的开始，我可以使用 Home Controller UploadImage 方法中的调试器查看 Request.Form.Files 中的文件，但我敢打赌，使用 ViewModel 有一种更简单的方法。

在我的视图模型中包含可变长度的 blob 数组的最佳方法是什么？也许使用FormFile或FormFileCollection类？或者我应该只使用 ajax 将其余的表单数据与上面的图像一起发布？任何我没有考虑过的解决方案？

其次，一旦图像在服务器上，我不确定如何准确地使用文件系统来存储它们。这是 .NET 文档中的一段代码，这似乎是我正在寻找的：

using (System.IO.FileStream fs = System.IO.File.Create(pathString))
{
   for (byte i = 0; i < 100; i++)
   {
      fs.WriteByte(i);
   }
}

这些是我基本上要问的问题：

  1. 我应该将图像存储在文件系统还是 SQL 数据库中？

2.我应该使用Ajax来发出请求吗？如果不：

  1. 我应该如何使用 ViewModel 发送 blob 数组？

  2. 我应该使用 FormFile 或 FormFileCollection 类来表示视图模型中的图像吗？还是带有 byte[] 字段的自定义 Image 类来保存图像本身？

谁能让我知道我是否朝着正确的方向前进，以及我应该使用哪些方法来上传和存储这些我没有考虑过的图像？

标签： c#sql-serverasp.net-mvchttpfilesystems

解决方案

推荐阅读