Файл Javascript в строку в файл в URL - PullRequest
Новая
       24

Файл Javascript в строку в файл в URL

0 голосов
/ 01 ноября 2019

Я преобразую изображение в строку и отправлю его на сервер из ajax, затем, когда я захочу получить его с сервера, я преобразую его в файл, а затем преобразую в URL изображения, поэтому я сделал тест ниже, и это не работает.

поэтому мне нужна ваша помощь

<html>
  <head></head>
  <body>
    <input type="file"/>Please input a "png" image for test<br>
    <img src=""/>
    <hr>
    <button state="working">Working</button>
    <button state="notworking">Not Working</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $.FileToString = async (File, callback) => {
          const reader = new FileReader()
          reader.onload = async () => {
              callback(await reader.result)
          }
          reader.readAsText(File)
      }
      
      $.StringToFile = (String, type)=>{
          return new Blob([String],{type:type})
      }
      
      $.FileToUrl = async (File,callback)=>{
          const reader = new FileReader()
          reader.onload = async ()=>{
              callback(await reader.result)
          }
          reader.readAsDataURL(File)
      }
    </script>
    <script>
      $("button[state='notworking']").on("click",()=>{
        $.FileToString($("input[type='file']")[0].files[0],(string)=>{
	        $.FileToUrl($.StringToFile(String,"image/png"),(a)=>($("img")[0].src = a))
        })
      })
      
      $("button[state='working']").on("click",()=>{
        $.FileToUrl($("input[type='file']")[0].files[0],a=>($("img")[0].src = a))
      })
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 01 ноября 2019

Вы должны использовать массивы буферов в качестве посредника 

<html>
  <head></head>
  <body>
    <input type="file"/>Please input a "png" image for test<br>
    <img src=""/>
    <hr>
    <button state="working">Working</button>
    <button state="notworking">now works</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $.FileToArrayBuffer = (File, callback) => {
            const reader = new FileReader();
            reader.onload = async () => {
                callback(await reader.result);
            }
            reader.readAsArrayBuffer(File)
        }

        $.ArrayBufferToString = (ArrayBuffer, callback)=>{
            btoa(new Uint8Array(blob).reduce(async (data,byte)=>{
                callback(await (data + String.fromCharCode(byte)));
            }));
        }

        $.StringToArrayBuffer = (String)=>{
            var enc = TextEncoder();
            return enc.encode(String);
        }

        $.ArrayBufferToFile = (ArrayBuffer)=>{
            return new Blob([ArrayBuffer])
        }

        $.FileToUrl = (File,callback)=>{
            const reader = new FileReader();
            reader.onload = async ()=>{
                callback(await reader.result);
            }
            reader.readAsDataURL(File);
        }
    </script>
    <script>
        $("button[state='notworking']").on("click",()=>{
            $.FileToArrayBuffer($("input[type='file']")[0].files[0],(arraybuffer)=>{
                $.FileToUrl($.ArrayBufferToFile(arraybuffer,"image/png"),(a)=>($("img")[0].src = a))
            })
        })
      
      $("button[state='working']").on("click",()=>{
        $.FileToUrl($("input[type='file']")[0].files[0],a=>($("img")[0].src = a))
      })
    </script>
  </body>
</html>
...