Использование FileReader.readAsDataUrl для загрузки изображения в службу Web Api

Question

Я пытаюсь использовать FileReader для получения представления изображения base-64 и отправить его в службу .net WebApi для загрузки изображений.

Моя проблема в том, что содержимое fileReader.result недействительно в качестве кодированного изображения с базой 64, по крайней мере, согласно .net.

Я просто использую очень простой метод и тестирую с помощью скрипача для отправки на службу. Если я опубликую полную строку результата из filereader.result, я получаю сообщение об ошибке «Недопустимая длина для массива или строки массива Base-64», когда я пытаюсь прочитать строку, используя FromBase64String.

public void Post([FromBody]string imgString) 
    { 
     var myString = imgString.Split(new char[]{','}); 
     byte[] bytes = Convert.FromBase64String(myString[1]); 
     using (MemoryStream ms = new MemoryStream(bytes)) 
     { 
      Image image = Image.FromStream(ms); 
      image.Save("myBlargyImage.jpg"); 
     } 
    } 

разрезают + вставить в стельку делать что-то к строке, что мне нужно, чтобы объяснить здесь, или есть что-то еще, что я не делаю правильно? Кажется, что это должно быть просто: кодировать изображение как строку, отправлять строку, декодировать строку, сохранять изображение.

Например, при использовании FileReader для предварительного просмотра изображения на клиенте, я получаю следующее в filereader.result:

SRC = "Данные: изображение/JPEG; base64,/9J/4AAQSkZJRgABAgEAyADIAAD /. ..oBUA00AqYL/AMCg3 // Z "

Я попытался как отправить всю строку (« данные ... Z »), так и только строку Base64. В настоящее время я разделяю строку на стороне сервера, чтобы получить строку Base64. Выполняя это, я всегда получаю неверную ошибку длины.

В качестве альтернативы, я попытался отправить только строку base64. Не зная, действительно ли ведущий/был частью строки или нет, я удалил ее в теле сообщения. Выполняя ЭТО, я действительно могу прочитать значение в массив байтов, но затем я получаю сообщение об ошибке с использованием Image.FromStream, что массив не является допустимым изображением.

Таким образом, либо я получаю сообщение об ошибке, что вся строка, предоставленная filereader, является недопустимой длиной, или я взламываю ее и получаю сообщение об ошибке, даже если это допустимая длина, это не допустимое изображение (при чтении bytearray). Именно это заставляет меня задаться вопросом, есть ли какая-то проблема перевода или форматирования между filereader.read, инструментами dev в хроме, а затем резкой и вставкой в ​​скрипач.

UPDATE: Я попытался более реалистичную реализацию, только принимая filereader.result и положить его в вызове $ .post(), и он работает, как ожидалось.

Похоже, я был прав, что я, или блокнот ++, или скрипач, что-то делаю с данными, когда касаюсь его, чтобы вырезать и вставить filereader.result в служебный вызов.

Если кто-то точно знает, что это может быть, или как можно проверить, что они отправляют действительную кодировку изображения с базой 64 для службы, это может помочь другим, которые пытаются в одно и то же в будущем.

Снова, если в браузере filereader.result получены данные: image/jpeg; base64, somestring ', я просто копировал эту строку с панели инструментов разработчика, создавая вызов скрипача и в тело запроса, включая скопированный string: "= data: image/jpeg; base64, somestring". Так или иначе, база-64 «somestring» собиралась перебиваться в вырезанной + пасте.

function readURL(input) { 

     if (input.files && input.files[0]) { 
      reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#imgPreview').attr('src', e.target.result); 
       $.post('/api/testy/t/4', 
        {'':e.target.result} 
       ); 
      }; 

      reader.readAsDataURL(input.files[0]); 
      reader.onloadend = function (e) { 
       console.log(e.target.result); 
      }; 
     } 
    } 

    $("#imgUpload").change(function() { 
     readURL(this); 
    }); 

Answer 1

Убедитесь, что скрипача не усечения базы 64 Строка

Answer 2

Не забудьте убрать 'шум' от dataUrl,

Например, в

data:image/png;base64,B64_DATA_HERE 

вы необходимо удалить часть data:image/png;base64,, поэтому вы обрабатываете только базовую часть 64.

С JS, было бы

var b64 = dataUrl.split("base64,")[1]; 

Надеется, что это помогает. Cheers

Answer 3

Данные uri не являются базой кодировки base64, она может содержать строку с кодировкой base64 в конце ее. В этом случае это так, поэтому вам нужно только отправить строку с кодировкой base64.

var imagestr = datauri.split(',')[1]; 
sendToWebService(imagestr);