Django上传图片找不到上传的图片

Question

刚接触Django，最近部署上传图片功能

我开发了简单的 HTML 模板并且它可以工作，但不知何故，我找不到上传的图片。

下面是我的代码。

settings.py（相关行）

MEDIA_ROOT = '/Users/jenny/Envs/django_test/static/'
MEDIA_URL = '/media/'

models.py

from django.db import models
from time import time

def get_upload_file_name(instance, filename):
    return "uploaded_files/%s_%s" % (str(time()).replace('.','_'), filename)

# Create your models here.
class UploadImage(models.Model):
    thumbnail = models.FileField(upload_to=get_upload_file_name)
    def __unicode__(self):
        return self.thumbnail

forms.py

from django import forms
from .models import UploadImage
class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UploadImage
        fields = ('thumbnail',)

views.py

def uploadtest(request):
    return render_to_response("uploadtest.html",context_instance=RequestContext(request))

def uploadtest1(request):
    if request.POST:
        form = UploadImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/uploadtest1/',context_instance=RequestContext(request))
    else:
        form = UploadImageForm()
    return render_to_response ('uploadtest1.html',context_instance=RequestContext(request))

uploadtest.html

<form action="{% url "uploadtest1" %}" method="post" enctype="multipart/form-data">{% csrf_token %}
     <p>
         <input id="id_image" type="file" class="" name="image">
     </p>
     <input type="submit" value="Submit" />
 </form>

uploadtest1.html

<p> uploaded! </p>

能帮我指出问题吗？我该如何更改代码才能使其正常工作？

Answer 1

我认为您 html 输入的拼写有误。在您的模型中，该字段名为 thumbnail，但您输入的名称为 image。让您的输入看起来像：

<input id="id_thumbnail" type="file" class="" name="thumbnail">

Answer 2

我解决了这个问题，现在我发布的网站上的代码运行很好。

forms.py

from django import forms

class DocumentForm(forms.Form):
    docfile = forms.FileField(label='Select a file')

models.py

from django.db import models

# Create your models here.
class Document(models.Model):
    #docfile = models.FileField(upload_to='documents/%Y/%m/%d')
    docfile = models.FileField(upload_to='documents/')

views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse

from uploadfile.models import Document
from uploadfile.forms import DocumentForm

def imageupload(request):
    # Handle file upload
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            newdoc = Document(docfile = request.FILES['docfile'])
            newdoc.save()

            # Redirect to the document list after POST
            return HttpResponseRedirect(reverse('uploadfile.views.list'))
    else:
        form = DocumentForm() # A empty, unbound form

    # Load documents for the list page
    doc_list = []
    documents = Document.objects.all()
    for document in documents:
        doc_list.append(document.docfile.name)
    print doc_list[-1]

    # Render list page with the documents and the form
    return render_to_response('imageupload.html',
    {'documents': documents,'form': form},
    context_instance=RequestContext(request))

def imageuploadresult(request):

    #here I used PyImgur package to upload image and get public url. Use sbi to get the Google BestGuess. What I return to this page is the uploaded image and google best guess. I will skip this part of code.
    return render_to_response(
        'imageuploadresult.html',
        {'query': q, 'imagepath':path2},
        context_instance=RequestContext(request))

imageupload.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title> Image Upload of **** System</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/css/dashboard.css" rel="stylesheet">

    <!-- Custome CSS -->
    <link href="/static/css/dataurl2.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js">    </script><![endif]-->
    <script src="/static/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media     queries -->
    <!--[if lt IE 9]>
      <!--script    src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
      <!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">   </script-->
      <script src="/static/js/html5shiv.min.js"></script>
      <script src="/static/js/respond.min.js"></script>
      <!--script type="text/javascript">
      $(window).load(function() {
              $(".loader").fadeOut("slow");
      })
      </script-->
    <![endif]-->
  </head>

  <body>
    <!--div class="loader"></div-->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-    toggle="collapse" data-target="#navbar" aria-expanded="false" aria-    controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href='/navigation/'>AKEOS</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="">Reports</a></li>
        <li><a href="">Export</a></li-->
      </ul>
      <ul class="nav nav-sidebar">
        <li class="active"><a href='/imageupload/'> Upload an Image <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li-->
          </ul>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
          <h1></h1>
          <h2></h2>
            <h3 class="custome-bar">
          <h1></h1>
              <h2></h2>
                <form action="{% url "imageuploadresult" %}" method="post"     enctype="multipart/form-data">
                    {% csrf_token %}

                    <p>{{ form.non_field_errors }}</p>
                    <p>{{ form.docfile.label_tag }} {{ form.docfile.help_text     }}</p>
                    <p>
                        {{ form.docfile.errors }}
                        {{ form.docfile }}
                    </p>

                    <p><input type="submit" value="Upload" style="font- size:10pt;color:white;background-color:#339933;border:2px solid #339933;padding:3px" /></p>
                </form>
          </h3>
        </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/docs.min.js"></script>
    <script src="/static/js/pace.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

imageuploadresult.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title> Image Upload of **** System</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/css/dashboard.css" rel="stylesheet">

    <!-- Custome CSS -->
    <link href="/static/css/dataurl2.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/static/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
      <!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
      <script src="/static/js/html5shiv.min.js"></script>
      <script src="/static/js/respond.min.js"></script>
      <!--script type="text/javascript">
      $(window).load(function() {
              $(".loader").fadeOut("slow");
      })
      </script-->
    <![endif]-->
  </head>

  <body>
    <!--div class="loader"></div-->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href='/navigation/'>AKEOS</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <!--li><a href="/search/">You searched for:<strong> {{query}}  </strong></a></li-->
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
          </ul>
          <ul class="nav nav-sidebar">
            <!--li><a href="">Analytics</a></li>
            <li><a href="">Reports</a></li>
            <li><a href="">Export</a></li-->
          </ul>
          <ul class="nav nav-sidebar">
            <li class="active"><a href='/imageupload/'> Upload an Image <span class="sr-only">(current)</span></a></li>
            <!--li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li-->
          </ul>

        </div>

        <!--div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
          <h3 class="custome-bar">
            <h3>The Best Guess is:<strong> {{query}}  </strong>
            <form action="/main-page/" method="get">
              <h5> To start over again, click the sidebars; to continue, click the button "Search" </h5>
              <h5>
              <input type="submit" name = "Submit" value="Search" >
              </h5>
              <h3></h3>
            </form>    
          </h3>

            <!--a class="btn btn-large btn-info" href="/main-page/">Search</a-->

            <p><img src={{imagepath}} class='img-responsive' /></p>
        </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/docs.min.js"></script>
    <script src="/static/js/pace.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

在 MySQL

中创建 table

table name : upload file_document

table columns : ID, docfile

现在您可以在您的网站上使用它了！

祝你有愉快的一天！

Django上传图片找不到上传的图片

Django Upload Image can not find uploaded image

python

django

views

models

image-uploading