如何通过WebApi上传图像

如何通过ASP.NET Web API上传图像文件？
我在文件模式下有一个输入标签，它发布到API，我如何将其保存到服务器文件夹
我尝试了这段代码但是没有用：

private void UploadWholeFile(HttpRequestBase request) { for (int i = 0; i < request.Files.Count; i++) { var file = request.Files[i]; var ext = new FileInfo(file.FileName).Extension; var fullPath = Path.Combine(StorageRoot, Path.GetFileName(Guid.NewGuid() + ext)); file.SaveAs(fullPath); } } 

Answer 1

这里我描述了在web api上传图像的整个过程

 [Route("user/PostUserImage")] public async Task PostUserImage() { Dictionary dict = new Dictionary(); try { var httpRequest = HttpContext.Current.Request; foreach (string file in httpRequest.Files) { HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created); var postedFile = httpRequest.Files[file]; if (postedFile != null && postedFile.ContentLength > 0) { int MaxContentLength = 1024 * 1024 * 1; //Size = 1 MB IList AllowedFileExtensions = new List { ".jpg", ".gif", ".png" }; var ext = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.')); var extension = ext.ToLower(); if (!AllowedFileExtensions.Contains(extension)) { var message = string.Format("Please Upload image of type .jpg,.gif,.png."); dict.Add("error", message); return Request.CreateResponse(HttpStatusCode.BadRequest, dict); } else if (postedFile.ContentLength > MaxContentLength) { var message = string.Format("Please Upload a file upto 1 mb."); dict.Add("error", message); return Request.CreateResponse(HttpStatusCode.BadRequest, dict); } else { YourModelProperty.imageurl = userInfo.email_id + extension; // where you want to attach your imageurl //if needed write the code to update the table var filePath = HttpContext.Current.Server.MapPath("~/Userimage/" + userInfo.email_id + extension); //Userimage myfolder name where i want to save my image postedFile.SaveAs(filePath); } } var message1 = string.Format("Image Updated Successfully."); return Request.CreateErrorResponse(HttpStatusCode.Created, message1); ; } var res = string.Format("Please Upload a image."); dict.Add("error", res); return Request.CreateResponse(HttpStatusCode.NotFound, dict); } catch (Exception ex) { var res = string.Format("some Message"); dict.Add("error", res); return Request.CreateResponse(HttpStatusCode.NotFound, dict); } } 

Answer 2

在WEB APIpost上设置此代码（取自http://www.c-sharpcorner.com/uploadfile/fc9f65/uploading-a-file-with-web-api-and-entity-framework-using-aja/ ）控制器：

  // POST: api/FileUploads [ResponseType(typeof(FileUpload))] public IHttpActionResult PostFileUpload() { if (HttpContext.Current.Request.Files.AllKeys.Any()) { // Get the uploaded image from the Files collection var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"]; if (httpPostedFile != null) { FileUpload imgupload = new FileUpload(); int length = httpPostedFile.ContentLength; imgupload.imagedata = new byte[length]; //get imagedata httpPostedFile.InputStream.Read(imgupload.imagedata, 0, length); imgupload.imagename = Path.GetFileName(httpPostedFile.FileName); db.FileUploads.Add(imgupload); db.SaveChanges(); // Make sure you provide Write permissions to destination folder string sPath = @"C:\Users\xxxx\Documents\UploadedFiles"; var fileSavePath = Path.Combine(sPath, httpPostedFile.FileName); // Save the uploaded file to "UploadedFiles" folder httpPostedFile.SaveAs(fileSavePath); return Ok("Image Uploaded"); } } return Ok("Image is not Uploaded"); } 

在您的UWP应用程序上，设置以下方法：

  using System; using System.Threading.Tasks; using Windows.Storage; using Windows.Storage.Streams; using Windows.Web.Http; // ... public static bool UploadImageToServer(StorageFile imageFile) { bool saveRes = false; try { using (HttpClient client = new HttpClient()) { if (client != null) // if no Network Connection { HttpResponseMessage response = new HttpResponseMessage(); Task task = Task.Run(async () => { using (HttpMultipartFormDataContent formData = new HttpMultipartFormDataContent()) { IBuffer buffer = await FileIO.ReadBufferAsync(imageFile); HttpBufferContent WebHTTPContent = new HttpBufferContent(buffer); formData.Add(WebHTTPContent, "UploadedImage", imageFile.Name); response = await client.PostAsync(App.VehicleImageUri, formData); if (response.IsSuccessStatusCode) saveRes = true; } }); task.Wait(); } } } catch (Exception em) { // Handle exception here ... } return saveRes; } 

您可以按如下方式调用方法：

 private async void CaptureImageByUser() { StorageFile file; // Create storage file in local app storage string fileName = GenerateNewFileName() + ".jpg"; CreationCollisionOption collisionOption = CreationCollisionOption.GenerateUniqueName; file = await ApplicationData.Current.TemporaryFolder.CreateFileAsync(fileName, collisionOption); // Captures and stores new Jpeg image file await mediaCapture.CapturePhotoToStorageFileAsync(ImageEncodingProperties.CreateJpeg(), file); // Delete the file in the temporary location if successfully uploaded if (SaveDataByUser.UploadImageToServer(file)) await file.DeleteAsync(); } private string GenerateNewFileName(string prefix = "IMG") { return prefix + "_" + DateTime.UtcNow.ToString("yyyy-MMM-dd_HH-mm-ss"); } 

嘿，让我知道它是否适合你！ 乐于帮助！ 🙂

Answer 3

WebApi支持反序列化JSON数组，因此您可以通过使用byte[]声明来接收字节。

以下示例将显示如何上传图像：

 public class ImageModel { public string Name { get; set; } public byte[] Bytes { get; set; } } 

在你的控制器中。 将图像写入磁盘：

 private string WriteImage(byte[] arr) { var filename = $@"images\{DateTime.Now.Ticks}."; using (var im = Image.FromStream(new MemoryStream(arr))) { ImageFormat frmt; if (ImageFormat.Png.Equals(im.RawFormat)) { filename += "png"; frmt = ImageFormat.Png; } else { filename += "jpg"; frmt = ImageFormat.Jpeg; } string path = HttpContext.Current.Server.MapPath("~/") + filename; im.Save(path, frmt); } return $@"http:\\{Request.RequestUri.Host}\{filename}"; } 

HttpContext.Current.Server.MapPath("~/")将给出服务器运行的内部路径。 Request.RequestUri.Host返回主机名。

 public IHttpActionResult UploadImage(ImageModel model) { var imgUrl = WriteImage(model.Bytes); // Some code } 

从浏览器发送图像

在HTML中：

AngularJS的上传方法：

 $scope.upload = function () { var file = document.getElementById("imageFile").files[0]; var r = new FileReader(); r.onloadend = function (e) { var arr = Array.from(new Uint8Array(e.target.result)); var uploadData = { Name: "Name of Image", Bytes: arr } console.log(uploadData); $http.post('api/Uploader/UploadImage', uploadData) .then( function (response) { console.log(response); }, function (reason) { console.log(reason); }) } r.readAsArrayBuffer(file); } 

Answer 4

您只需将图像转换为Base64String，然后将其作为StringContent发布 。

 public static async Task Post(string controller, string method, string accessToken, string bodyRequest) where T : class { using (HttpClient client = new HttpClient()) { client.DefaultRequestHeaders.Clear(); client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken); var stringContent = new StringContent(bodyRequest, Encoding.UTF8, "application/json"); var response = await client.PostAsync($"{Constants.ApiBaseUrl}/api/{controller}/{method}", stringContent); if (response.IsSuccessStatusCode) return response.Content as T; } return default(T); } 

我的代码上的bodyRequest是要转换为字符串的类/模型值

使用Json.Serialize（model） ，它还包含你的图像System.Convert.ToBase64String（imageBytes []）作为它的属性。

Answer 5

如果您的API一次只允许一个图像， System.Web.Helpers.WebImage可能会有所帮助。 只需确保包含文件名即可。

—— WebKitFormBoundaryzrmNUJnUirtKajVF Content-Disposition：form-data; NAME = “图像”; filename =“IMG_3321.JPG”内容类型：image / jpeg

—— WebKitFormBoundaryzrmNUJnUirtKajVF–

 [HttpPost] [ResponseType(typeof(Models.Photo))] [Route("upload")] public async Task Upload() { var img = WebImage.GetImageFromRequest(); if (img == null) { return BadRequest("Image is null."); } // Do whatever you want with the image (resize, save, ...) // In this case, I save the image to a cloud storage and // create a DB record to reference the image. }