Javascript 在django中显示图像

我有一个Django网络应用程序，我上传了一张图片并显示了一些文本。但上传后，我无法在前端显示图像

views.py

def index(request):
    if request.method == "GET":
        return render(request, 'index.html')
    elif request.method == "POST":
        input_file = request.FILES['file']
        media_root = settings.MEDIA_ROOT
        fs = FileSystemStorage()
        filename = fs.save(input_file.name, input_file)
        uploaded_file_url = fs.url(filename)
        filepath = os.path.join(media_root, filename)
        images = segment_lines(filepath)
        extracted_text = extract()
        copy2(filepath, '/home/user/ocr/ocr/static/'+ filename)
        response = { "response" : extracted_text, "img": filename}
        return JsonResponse(response, safe=False)

index.html

<form action="" id="file-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">
        <div class="col-sm-10 col-md-10 col-lg-9">
            <div class="form-group">
               <div class="input-group">
                   <div class="input-group-prepend">
                       <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                    </div>
                    <div class="custom-file">
                        <input type="file"  accept="image/*" name="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                    </div>
                </div>           
            </div>            
      </div>

      <div class="col-sm-2 col-md-2 col-lg-3">
          <span class="upload-btn">
          <button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
          </span>
      </div>
     </div>
 </form>
<div class="row" style="border:none;">
      <div class="col-xs-6 mx-auto" id="img_data">
      </div>
      <div class="col-xs-6 mx-auto" id="content_data">
      </div>
</div>
<script type="text/javascript">
    var form = document.getElementById('file-form');
    var fileSelect = document.getElementById('inputGroupFile01');
    var uploadButton = document.getElementById('upload-button');

    form.onsubmit = function(event) {
      event.preventDefault();
      uploadButton.innerHTML = 'Processing ...';
      var file = fileSelect.files[0];
      var formData = new FormData();
      formData.append('file', file, file.name);
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://127.0.0.1:8000', true);

      xhr.onload = function () {

        if (xhr.status === 200) {
          uploadButton.innerHTML = 'Extract';
          var data = JSON.parse(xhr.responseText);
          var follow_up = data['response'];
          var corrected = data["correct_response"]
          var demoid = document.getElementById("content_data");

          var btnid = document.getElementById('btn-data')
          var imgid = document.getElementById('img_data')
          var img_path = data["img"]
          var final_content = follow_up;
          demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'
</script>

{%csrf_令牌%}
上载
选择文件
摘录
var form=document.getElementById（'file-form'）；
var fileSelect=document.getElementById（'inputGroupFile01'）；
var uploadButton=document.getElementById（'upload-button'）；
form.onsubmit=函数（事件）{
event.preventDefault（）；
uploadButton.innerHTML='Processing…'；
var file=fileSelect.files[0]；
var formData=new formData（）；
formData.append（'file'，file，file.name）；
append（'csrfmiddlewaretoken'，'{{csrf_token}}'）；
var xhr=new XMLHttpRequest（）；
xhr.open（'POST'，'http://127.0.0.1:8000",对),；
xhr.onload=函数（）{
如果（xhr.status==200）{
uploadButton.innerHTML='Extract'；
var data=JSON.parse（xhr.responseText）；
var跟进=数据[‘响应’]；
var校正=数据[“校正响应”]
var demoid=document.getElementById（“内容数据”）；
var btnid=document.getElementById（'btn-data'）
var imgid=document.getElementById（'img_data'）
var img_path=数据[“img”]
var最终内容=跟进；
demoid.innerHTML='extractedtext
'+最终内容+'
'

我如何在这里显示上传的图片，我对javascript几乎没有经验，所以如果有人能在这方面帮助我的话

到目前为止，我尝试的是传递图像路径URL，并使用{%static%}尝试如下所示显示图像

imgid.innerHTML = '<h3>Your Image</h3><img class="id-of-img-tag" src="" alt="img" style="width:300px;height:300px;margin-right:15px;">'
document.querySelector(".id-of-img-tag").src = "{% static " + img_path + " %}";

imgid.innerHTML='Your Image'
document.querySelector（“.id of img tag”）.src=“{%static”+img_path+“%}”；

您可能需要使用

fs.url（）

将url重建为保存的图像

此外，正如评论中所讨论的，

segment\u lines（）

应该返回

extract\u text（）

将使用的文件名列表。否则，如果/当您使用单个临时文件夹时，并发请求将造成严重破坏

从django.core.files.storage导入文件系统存储
从django.http导入JsonResponse
def提取_文本（输入_路径）：
#…使用输入路径执行一些魔术。。。
返回“你好”
def段_线（图像_路径）：
返回[
#…分段结果的文件路径。。。
]
def句柄（请求）：
input_file=request.FILES['file']
fs=文件系统存储（）
filename=fs.save（输入文件.name，输入文件）
图像=段线（fs.path（文件名））
提取的文本=提取的文本（图像）
response={“response”：提取的_文本，“img_url”：fs.url（文件名）}
返回JsonResponse（response）

然后，使用

fetch（）

和表单数据，创建HTML的简化版本：

<form action="" id="file-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" accept="image/*" name="file" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
</form>
<div id="content_data"></div>
<script type="text/javascript">
  var form = document.getElementById('file-form');
  var uploadButton = document.getElementById('upload-button');

  form.onsubmit = function (event) {
    event.preventDefault();
    uploadButton.innerHTML = 'Processing ...';
    fetch('/', {body: new FormData(form)})
      .then(resp => resp.json())
      .then(data => {
        console.log(data);
        const demoid = document.getElementById('content_data');
        demoid.innerText = JSON.stringify(data);
        // or to show the image:
        // demoid.innerHTML = `<img src="${data.img_url}"/>`;
      });
  };
</script>

{%csrf_令牌%}
摘录
var form=document.getElementById（'file-form'）；
var uploadButton=document.getElementById（'upload-button'）；
form.onsubmit=函数（事件）{
event.preventDefault（）；
uploadButton.innerHTML='Processing…'；
fetch（'/'，{body:newformdata（form）}）
.then（resp=>resp.json（））
。然后（数据=>{
控制台日志（数据）；
const demoid=document.getElementById（'content_data'）；
demoid.innerText=JSON.stringify（数据）；
//或显示图像：
//demoid.innerHTML=`；
});
};

---

这里肯定有我遗漏的东西。

如果图像的路径有效，那么应该使用

new image（）

构造函数创建图像。这类似于执行

document.createElement（'img'））

创建图像。构造函数返回一个

HTMLImageElement

实例，该实例基本上是与图像的

属性（该属性也将设置）等价的JavaScript，以开始从静态文件夹下载图像

...
var btnid = document.getElementById('btn-data')
var imgid = document.getElementById('img_data')
var img_path = data["img"]

var image = new Image();
image.addEventListener('load', function() {
  var title = document.createElement('h3');
  title.textContent = 'Your image';
  image.className = 'id-of-img-tag';
  image.alt = 'img';
  image.style.width = '300px';
  image.style.height = '300px';
  image.style.marginRight = '15px';
  imgid.append(title, image);
}, {once: true});
image.src = img_path;

var final_content = follow_up;
demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'

。。。
var btnid=document.getElementById（'btn-data'）
var imgid=document.getElementById（'img_data'）
var img_path=数据[“img”]
var image=新图像（）；
image.addEventListener（'load'，function（））{
var title=document.createElement（'h3'）；
title.textContent='Your image'；
image.className='img标记的id'；
image.alt='img'；
image.style.width='300px'；
image.style.height='300px'；
image.style.marginRight='15px'；
附加（标题、图像）；
}，{once:true}）；
image.src=img_路径；
var最终内容=跟进；
demoid.innerHTML='extractedtext
'+最终内容+'
'
数据[“img”]

值是否包含指向静态文件夹中图像的正确路径？是的，这是正确的图像文件名，我稍后将使用该名称。您的img\u路径正确吗？我使用console.log查看数据[“img”]这里显示的是正确的文件名。但是当我检查元素时，它显示的是这样的function？我发现它不接受输入文件名作为参数是可疑的。但在您的html示例中，如何在html中显示图像？@AlokKumarPadhi已修改。是的，我同意，对于并发请求，我将修改我的代码。