Javascript 用于上载已调整大小的图像的服务器代码

我正在调整图像大小并将其上载到服务器：

除了上传服务器部件，一切正常。
我不确定获取“图像”的服务器代码应该是什么样子

如果图像是常规图像，则上载此服务器代码可以正常工作：

[HttpPost]
public JsonResult SaveFiles()
{
    if (Request.Files != null)
    {
        var file = Request.Files[0];
        actualFileName = file.FileName;
        int size = file.ContentLength;
        file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), fileName));               
    }
    return Json { new { Result= 1 } };
}

从该图像中取出的控制台如下所示：

但是，对于已调整大小的映像，其控制台注销输出如下所示：

这就是所谓的canvase图像吗？

这是客户端的angularjs代码：

 $scope.single = function(image) {
    var formData = new FormData();
    formData.append('image', image, image.name);

    $http.post('/Photo/UploadPhoto', formData, {
        headers: { 'Content-Type': undefined},
        transformRequest: angular.identity
    }).success(function(result) {
        $scope.uploadedImgSrc = result.src;
        $scope.sizeInBytes = result.size;
    });
};

它的服务器代码应该是什么样子？

我试过了，但没有成功：

[HttpPost]
public JsonResult UploadPhoto(string image)
{
    var count = Request.Files.Count; //gives me 0

    string fileName = "somefilename.png";
    string fileNameWitPath = Path.Combine(Server.MapPath("~/"), fileName);

    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(image);
            bw.Write(data);
            bw.Close();
        }
        fs.Close();
    }

    return Json(new { result = 1});
}

哪个是错误的

image

参数为null

公共JSonResult索引（HttpPostedFileBase image） { ...

---

}

从使用Mishi插件开始刷新后，我在控制台中为图像提供了以下输出：

从屏幕截图：

image = {
    url: 'blob:http%3A//localhost%3A52646/463f234c-53da-4cef-bbda-1aee44777d5d',
    file: 
    dataURL: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRX...mB//Z',
        {
            FilelastModified: '1428117254000',
            lastModifiedDate: 'Fri Apr 03 2015 23:14:14 GMT-0400 (Eastern Daylight Time)',
            name: "__image.jpg",
            size: '15426',
            type: "image/jpeg",
            webkitRelativePath: ""
        }
}

和客户端代码：

$scope.single = function (image) {
    var formData = new FormData();
    formData.append("imageJson", JSON.stringify(image));

    $http.post('/Photo/UploadPhoto', formData, {
        headers: { 'Content-Type': undefined },
        transformRequest: angular.identity
    }).success(function (result) {
        //...
    });
}

public class File
{
    public string FilelastModified { get; set; }//: '1428117254000',
    public string LastModifiedDate { get; set; }//: 'Fri Apr 03 2015 23:14:14 GMT-0400 (Eastern Daylight Time)',
    public string Name { get; set; }//: "__image.jpg",
    public string Size { get; set; }//: '15426',
    public string Type { get; set; }//: "image/jpeg",
    public string WebkitRelativePath { get; set; }//: ""
}
public class Image
{
    public string Url { get; set; }//'blob:http%3A//localhost%3A52646/463f234c-53da-4cef-bbda-1aee44777d5d',
    public string DataURL { get; set; } //: 'data:image/jpeg;base64,/9j/4AAQSkZJRg.../5ZUUUVoAU5OlFFZgOqnPGvm9KKKADy18vpUc9FFaAOs53z941eooomB//Z',
    public string ImageData { get; set; }
    public File File { get; set; }
}

public JsonResult UploadPhoto(string imageJson)
{

    Image imageObject = new  JavaScriptSerializer().Deserialize<Image>(imageJson);
    imageObject.ImageData = imageObject.DataURL.Substring(imageObject.DataURL.IndexOf("base64,") + "base64,".Length);
    byte[] bytes = Convert.FromBase64String(imageObject.ImageData);
    Guid guid = Guid.NewGuid();
    var fileName = guid  + "_" + imageObject.File.Name ;
    System.Drawing.Image imageDrawing;
    using (System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes))
    {
        imageDrawing = System.Drawing.Image.FromStream(ms);


        var dirName = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/App_Data"), roomId.ToString());
        if (!Directory.Exists(dirName))
            Directory.CreateDirectory(dirName);
        string fileNameWitPath = System.IO.Path.Combine(dirName, fileName);
        //ImageFormat imageFormat = System.Drawing.Imaging.ImageFormat.Png;
        imageDrawing.Save(fileNameWitPath);

    }

    return Json(new { result = 1 });
}

和服务器端代码：

$scope.single = function (image) {
    var formData = new FormData();
    formData.append("imageJson", JSON.stringify(image));

    $http.post('/Photo/UploadPhoto', formData, {
        headers: { 'Content-Type': undefined },
        transformRequest: angular.identity
    }).success(function (result) {
        //...
    });
}

public class File
{
    public string FilelastModified { get; set; }//: '1428117254000',
    public string LastModifiedDate { get; set; }//: 'Fri Apr 03 2015 23:14:14 GMT-0400 (Eastern Daylight Time)',
    public string Name { get; set; }//: "__image.jpg",
    public string Size { get; set; }//: '15426',
    public string Type { get; set; }//: "image/jpeg",
    public string WebkitRelativePath { get; set; }//: ""
}
public class Image
{
    public string Url { get; set; }//'blob:http%3A//localhost%3A52646/463f234c-53da-4cef-bbda-1aee44777d5d',
    public string DataURL { get; set; } //: 'data:image/jpeg;base64,/9j/4AAQSkZJRg.../5ZUUUVoAU5OlFFZgOqnPGvm9KKKADy18vpUc9FFaAOs53z941eooomB//Z',
    public string ImageData { get; set; }
    public File File { get; set; }
}

public JsonResult UploadPhoto(string imageJson)
{

    Image imageObject = new  JavaScriptSerializer().Deserialize<Image>(imageJson);
    imageObject.ImageData = imageObject.DataURL.Substring(imageObject.DataURL.IndexOf("base64,") + "base64,".Length);
    byte[] bytes = Convert.FromBase64String(imageObject.ImageData);
    Guid guid = Guid.NewGuid();
    var fileName = guid  + "_" + imageObject.File.Name ;
    System.Drawing.Image imageDrawing;
    using (System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes))
    {
        imageDrawing = System.Drawing.Image.FromStream(ms);


        var dirName = Path.Combine(System.Web.Hosting.HostingEnvironment.MapPath("~/App_Data"), roomId.ToString());
        if (!Directory.Exists(dirName))
            Directory.CreateDirectory(dirName);
        string fileNameWitPath = System.IO.Path.Combine(dirName, fileName);
        //ImageFormat imageFormat = System.Drawing.Imaging.ImageFormat.Png;
        imageDrawing.Save(fileNameWitPath);

    }

    return Json(new { result = 1 });
}

公共类文件
{
公共字符串FilelastModified{get；set；}/：'1428117254000'，
公共字符串LastModifiedDate{get；set；}/：'Fri Apr 03 2015 23:14:14 GMT-0400（东部夏令时）'，
公共字符串名称{get；set；}/：“_image.jpg”，
公共字符串大小{get；set；}/：'15426'，
公共字符串类型{get；set；}/：“image/jpeg”，
公共字符串WebkitRelativePath{get；set；}/：“”
}
公众阶级形象
{
公共字符串Url{get；set；}/'blob:http%3A//localhost%3A52646/463f234c-53da-4cef-bbda-1ae44777d5d'，
公共字符串DataURL{get；set；}/:'data:image/jpeg；base64，/9j/4AAQSkZJRg…/5zuuuvoau5olffzgoqnpgvm9kkkady18vpuc9ffaaos53z941ooomb//Z'，
公共字符串ImageData{get；set；}
公共文件{get；set；}
}
公共JsonResult上载照片（字符串imageJson）
{
Image imageObject=new JavaScriptSerializer（）。反序列化（imageJson）；
imageObject.ImageData=imageObject.DataURL.Substring（imageObject.DataURL.IndexOf（“base64”）+“base64.”.Length）；
byte[]bytes=Convert.FromBase64String（imageObject.ImageData）；
Guid=Guid.NewGuid（）；
var fileName=guid+“\u”+imageObject.File.Name；
系统图、图像图；
使用（System.IO.MemoryStream ms=new System.IO.MemoryStream（字节））
{
imageDrawing=System.Drawing.Image.FromStream（毫秒）；
var dirName=Path.Combine（System.Web.Hosting.HostingEnvironment.MapPath（“~/App_Data”）、roomId.ToString（）；
如果（！Directory.Exists（dirName））
Directory.CreateDirectory（dirName）；
字符串fileNameWitPath=System.IO.Path.Combine（dirName，fileName）；
//ImageFormat ImageFormat=System.Drawing.Imaging.ImageFormat.Png；
imageDrawing.Save（fileNameWitPath）；
}
返回Json（新的{result=1}）；
}

它将null绑定到imageTry以创建一个模型：在javascript中UploadPhotoModel{HttpPostedFileBase image{get；set；}}以var postdata=new FormData（$（“#frmUpload”）[0]）的形式创建postdata；和您的控制器：publicJSONResult索引（上传的Photomodel模型）