javascript - 在c#中接收并保存ajax发布的图像

Question

我是开发新手，所以请原谅我的无知。我正在使用cropper.js 示例将裁剪后的图像发布到内部服务器。我需要在服务器端接收帖子并将数据保存为图像。我的裁剪功能如下：

          document.getElementById('crop').addEventListener('click', function () {
              var initialAvatarURL;
              var canvas;

              $modal.modal('hide');

              if (cropper) {
                  canvas = cropper.getCroppedCanvas({
                      width: 160,
                      height: 160,
                  });
                  initialAvatarURL = avatar.src;
                  avatar.src = canvas.toDataURL();
                  $progress.show();
                  $alert.removeClass('alert-success alert-warning');
                  canvas.toBlob(function (blob) {
                      var formData = new FormData();

                      formData.append('avatar', blob, 'avatar.jpg');
                      $.ajax('http://localhost:1233/http://localhost:1234/test', {
                          method: 'POST',
                          data: formData,
                          processData: false,
                          contentType: false,

                          xhr: function () {
                              var xhr = new XMLHttpRequest();

                              xhr.upload.onprogress = function (e) {
                                  var percent = '0';
                                  var percentage = '0%';

                                  if (e.lengthComputable) {
                                      percent = Math.round((e.loaded / e.total) * 100);
                                      percentage = percent + '%';
                                      $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                                  }
                              };

                              return xhr;
                          },

                          success: function () {
                              $alert.show().addClass('alert-success').text('Upload success');
                          },

                          error: function () {
                              avatar.src = initialAvatarURL;
                              $alert.show().addClass('alert-warning').text('Upload error');
                          },

                          complete: function () {
                              $progress.hide();
                          },
                      });
                  });
              }

我正在使用 cors-anywhere nodejs 代理来处理用于测试的 cors 问题。我在下面的 c# 中有一个监听器示例：

namespace httplistenerexample
{
    class Program
    {
        static void Main(string[] args)
        {
            StartServer();
            Console.ReadKey();
        }

        public static void StartServer()
        {
            var httpListener = new HttpListener();
            var simpleServer = new SimpleServer(httpListener, "http://127.0.0.1:1234/test/", ProcessYourResponse);
            simpleServer.Start();
        }

        public static byte[] ProcessYourResponse(string test)
        {
            Console.WriteLine(test);
            return new byte[0]; // TODO when you want return some response
        }

        public delegate byte[] ProcessDataDelegate(string data);

        public class SimpleServer
        {
            private const int HandlerThread = 2;
            private readonly ProcessDataDelegate handler;
            private readonly HttpListener listener;

            public SimpleServer(HttpListener listener, string url, ProcessDataDelegate handler)
            {
                this.listener = listener;
                this.handler = handler;
                listener.Prefixes.Add(url);
            }

            public void Start()
            {
                if (listener.IsListening)
                    return;

                listener.Start();

                for (int i = 0; i < HandlerThread; i++)
                {
                    listener.GetContextAsync().ContinueWith(ProcessRequestHandler);
                }
            }

            public void Stop()
            {
                if (listener.IsListening)
                    listener.Stop();
            }

            private void ProcessRequestHandler(Task<HttpListenerContext> result)
            {
                var context = result.Result;

                if (!listener.IsListening)
                    return;

                // Start new listener which replace this
                listener.GetContextAsync().ContinueWith(ProcessRequestHandler);

                // Read request
                string request = new StreamReader(context.Request.InputStream).ReadToEnd();

                // Prepare response
                var responseBytes = handler.Invoke(request);
                context.Response.ContentLength64 = responseBytes.Length;

                var output = context.Response.OutputStream;
                output.WriteAsync(responseBytes, 0, responseBytes.Length);
                output.Close();
            }

        }




    }
}

我可以通过 ProcessYourResponse 方法中的 console.writeline 在屏幕上看到图像数据，但似乎无法弄清楚如何检索数据并将其保存为文件。我目前将数据作为 blob 发布，所以看来我需要使用流来检索二进制数据。这是最好的方法，还是我应该将数据作为 base64 字符串发布并使用流读取器检索它。简而言之，我需要 ProcessYourResponse 方法将图像数据保存到文件中。我真的需要一些帮助，因为我已经为此奋斗了好几个星期了。先感谢您。

标签： javascriptc#ajaximagepost