通过Javascript使用blob将图像存储为文件

我正在做这个项目，在使用AWSS3托管图像时遇到了一些麻烦。因此，我决定将图像存储为Blob，并让Javascript将文件转换为Blob，然后使用AJAX和API将其存储在数据库中。虽然这可能不太理想，但我仍在学习Javascript，也没有太多处理BLOB，所以我想为什么不，是时候学习了

我的问题是，当我尝试使用DataURI在页面上显示图像时，它会显示为字符串而不是DataURI，因此会作为损坏的图像加载。我还没有使用ajax，因为我认为最好先将图像转换成ascii字符串，放入blob中，然后在涉及API/服务器之前将其取出。这是我的html：

{% extends 'mp_app/base.html' %}
{% load staticfiles %}
{% block content %}
<div id="page-wrapper">
    <pre id="fileDisplayArea"></pre>
     <form  id="picForm" method='post'>
       {% csrf_token %}
       <input type="file" id='imgFile' name="pic" accept="image/*">
       <input type="submit" id='submitBtn'>
      <input type="submit" id="showBtn">
    </form>
 <div id="imageDisplay"></div>
 </div>
{% endblock %}
{% block javascript %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/blob.js' %}"></script>
{% endblock %}

---

imgsrc读取blob字符串使我认为DataURI有问题，可能它没有以正确的格式获取文件。我无法发布屏幕截图，因为我需要更好的声誉。对不起，这是如此冗长，但我想尝试，使一个高质量的职位。谢谢大家!

我解决了这个问题。将在此处发布给可能需要此选项的未来学习者

---

textToImg（）已经有了所需的字符串，所以您只需获取字符串，将其添加到文件输入元素（我将其添加为'value'attr），然后让image.src='data:image/*；base64，+值属性。你可以走了

TLDR；当我试图通过reader.readAsDataURL在页面上显示我的img blob时，长字节64字符串由src属性读取，而不是显示文件的元数据。

//js file to turn an image into a blob, then store the blob in our API.
// next: retrive the blob and put it on the page

function textToImg(text) {
//get ascii string into binary then into an array then into a blob.
//had some strange issues using ArrayBuffer()
var file = new 
Array(atob(document.getElementById('fileDisplayArea').innerText));
file = new Blob(file, {type:'image/*'});
let displayArea = document.getElementById('imageDisplay')

//currently doesn't seem to be loading as a DataURL. It's type is string and 
//shows up as a broken image.
var reader = new FileReader();
reader.onload = function(event) {
var content = event.target.result;
img = new Image();
img.src = content;
displayArea.append(img)
console.log(img);
}
reader.onerror = function(event) {
   console.error('error, file could not be read: ' + 
   event.target.error.code);;
}
reader.readAsDataURL(file);
// TODO get data via ajax to our DB our restful API
}

//turns an image into a blob
function imgToText() {
// get file elem and get image
let file = document.getElementById('imgFile');
let img = document.getElementById('imgFile').files[0];
let displayArea = document.getElementById('fileDisplayArea');

//open a file reader and read in file, then turn it from binary to ascii
var reader = new FileReader();

reader.onload = function(event) {
    let contents = event.target.result;

    //turn to ascii string
    let asciiContents = btoa(contents);

    //add ascii string to form
    let form = {
        'file': asciiContents,
    }
    displayArea.append(form.file);
};

reader.onerror = function(event) {
    console.error('error, file could not be read');
}

//read file as a bit string
reader.readAsBinaryString(img);

// TODO send data via ajax to our DB our restful API
};

//add click event so that image is processed upon submit
$('#submitBtn').click(function(event) {
    event.preventDefault();
    imgToText();
 });

$('#showBtn').click(function(event) {
    event.preventDefault();
    textToImg();
})