上传调整大小的图像的服务器代码

时间:2015-04-04 20:10:03

标签: javascript c# asp.net-mvc angularjs file-upload

我正在mischi plugin调整大小并将图片上传到服务器:

除了上传服务器部分外,一切顺利 我不确定它应该如何才能获得服务器代码" image"。

如果图像是常规图像上传此服务器代码可以正常工作:

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

和控制台输出该图像看起来像:enter image description here

但是对于已调整大小的图像,其控制台注销看起来像: enter image description here

这就是所谓的画布图片吗?

这是客户端的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参数为空

2 个答案:

答案 0 :(得分:0)

public JSonResult Index(HttpPostedFileBase image) { ... }

答案 1 :(得分:0)

从使用mischi插件开始刷新后,我在控制台中输出了这个图像:

enter image description here

来自截屏:

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