Uso de FileReader.readAsDataUrl para cargar imágenes en el service Web Api

Estoy tratando de usar el FileReader para get la representación de base 64 de una image y enviarla a un service .net WebApi para la carga de imágenes.

Mi problema es que los contenidos de fileReader.result no son válidos como una image codificada en base 64, al less según .net.

Solo estoy usando un método muy simple y estoy probando con el violinista para publicar en el service. Si publico la cadena de resultados completa de filereader.result, aparece un error "Longitud inválida para una matriz de caracteres o cadena de Base 64" cuando bash leer la cadena con 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"); } } 

¿Cortar + pegar en el violín haciendo algo con la string que necesito explicar aquí, o hay algo más que no estoy haciendo correctamente? Parece que debería ser sencillo: codifica la image como una cadena, envía la cadena, decodifica la cadena y guarda la image.

Por ejemplo, al utilizar filereader para mostrar una vista previa de la image en el cliente, obtengo lo siguiente en filereader.result:

src = "data: image / jpeg; base64, / 9j / 4AAQSkZJRgABAgEAyADIAAD / … oBUA00AqYL / AMCg3 // Z"

He intentado enviar tanto la cadena completa ("datos … Z") como solo la cadena Base64. Actualmente, estoy dividiendo el lado del server de cadenas para get la cadena Base64. Al hacer esto, siempre obtengo el error de longitud no válida.

Alternativamente, he intentado enviar solo la cadena base64. Sin saber si el líder / era en realidad parte de la cadena o no, lo eliminé en el cuerpo de la publicación. Al hacer ESTO, puedo leer el valor en una matriz de bytes, pero luego obtengo un error al usar Image.FromStream que la matriz no es una image válida.

Entonces, o me sale un error de que toda la cadena proporcionada por el lector de files tiene una longitud no válida, o la pirateo y obtengo el error de que, incluso si es una longitud válida, no es una image válida (al leer el bytearray ) Eso es lo que me hace preguntarme si hay algún problema de traducción o formateo entre el lector de files.read, las herramientas dev en Chrome, y luego cortar y pegar en fiddler.

ACTUALIZACIÓN: Intenté una implementación más realist simplemente tomando el filereader.result y poniéndolo en una llamada $ .post (), y funciona como se esperaba.

Parece que tenía razón, que yo, o notepad ++, o violinista, estoy haciendo algo con los datos cuando los toco para cortar y pegar filereader.result en una llamada de service.

Si alguien sabe exactamente lo que podría ser, o cómo uno puede verificar que está enviando una encoding de base 64 válida de una image a un service, podría ayudar a otros que están intentando lo mismo en el futuro.

Nuevamente, si en el buscador filereader.result obtuve 'data: image / jpeg; base64, somestring', simplemente estaba copyndo esa cadena desde el panel de herramientas del desarrollador, creando una llamada a un violinista y en el cuerpo de la request incluyendo la cadena copyda: "= datos: image / jpeg; base64, somestring ". De alguna manera, la base-64 'somestring' se estaba comiendo en el corte + pega.

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

3 Solutions collect form web for “Uso de FileReader.readAsDataUrl para cargar imágenes en el service Web Api”

No olvides eliminar el 'ruido' de un dataUrl,

Por ejemplo en

 data:image/png;base64,B64_DATA_HERE 

tiene que eliminar los data:image/png;base64, parte anterior, por lo que solo procesa la parte de la base 64.

Con js, sería

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

Espero que esto ayude. Aclamaciones

Un uri de datos no es una cadena de encoding base64, puede contener una cadena codificada en base64 al final de la misma. En este caso sí lo hace, por lo que solo debe enviar la parte de cadena codificada en base64.

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

Asegúrate de que el violín no está truncando la Base 64 String

  • Firefox - "FileReader no está definido" solo cuando se llama desde Web Worker
  • Pasar un parámetro al evento de carga de FileReader
  • image, evento de carga no funciona en cromo
  • ¿Cómo puedo probar un controller de cambios para una input de tipo de file en React using Jest / Enzyme?
  • ¿Cómo get el nombre de file de Javascript FileReader?
  • Cargar image en FileReader
  • Abrir files zip en el browser con FileReader y JSZip.js
  • Configuración de estilo backgroundImage desde un FileReader
  • Cordova 3.4 FileReader no funciona (no onloadend)
  • ¿Es posible enviar events en objects regulares (no DOM)?
  • ¿Cómo convertir imágenes con formatting .png a formatting .jpg en Javascript Filereader?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.