Django 中 ajax 上传图片详细步骤

本贴最后更新于 1940 天前,其中的信息可能已经事过境迁

前言

采用的是 Django 自带的上传图片函数,需要配置图片上传路径并安装 pillow 库。

1. 配置本地图片上传路径

  • 在项目根目录下的 settings.py 中添加如下配置信息。
MEDIA_URL = '/media/' # 虚拟地址(URL方式访问的地址)
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 文件存放目录

os.path.join()是路径拼接函数,它会把两个路径拼接起来,中间以’/‘隔开。BASE_DIR 是项目根目录,在 settings.py 中已经定义,例如的我项目根目录是’/home/zyk/PycharmProjects/django_admin‘,那么 os.path.join(BASE_DIR, 'media')拼接的结果就是’/home/zyk/PycharmProjects/django_admin/media

MEDIA_ROOT 指的是文件存放的实际路径。它是 MEDIA_URL 的映射,在浏览器中是无法直接访问到本地文件夹的,只能通过 MEDIA_URL 的映射来间接访问。

MEDIA_URL 指的是虚拟地址,即在浏览器中访问指定本地文件夹的 URL。例如在浏览器中以’http://127.0.0.1:8000/media/‘的 URL 方式发送请求,其实就是在访问MEDIA_ROOT 对应的本地文件夹。

  • 修改完毕之后,不要忘记要在项目根目录下面新建一个名称为 media 的文件夹。

2. 新建上传图片页面

  • 新建一个 html 文件,名称为 img_upload.html,具体内容如下。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="img-form">
    <div style="margin: 50px;">
        <input type="file" name="img" id="img">
    </div>
    <div style="margin: 50px;">
        <input type="button" value="提交">
    </div>
</form>
</body>
</html>

3. 编写跳转上传图片页面函数

  • 编写 App 目录下 views.py,添加跳转上传图片页面函数。
def to_img_load(request):
    return render(request, 'img_upload.html')
  • 把该函数注册到项目根目录下的 urls.py 中,对应的请求地址为’to_upload_img‘。
from django.contrib import admin
from django.urls import path
from app001 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.get_user),
    path('to_upload_img/', views.to_img_load),  # 跳转至上传图片页面
]

4. 新建图片实体类

  • 在 app 目录下的 models.py 中添加一个实体类,如下所示。
class Image(models.Model):
    img = models.ImageField(upload_to='upload/')

ImageField 表示这是一个图片类型的字段

upload_to='upload/'表示图片将会被上传至之前配置的 MEDIA_ROOT 目录下的 upload 文件夹中(这个文件名称可以自定义,在这里暂时使用 upload),以防万一,我们在之前已经创建好的 media 文件夹下新建名称为 upload 的文件夹。


5. 反向生成数据表

  • 由于我们只定义了实体类,数据库中还没有这个实体类对应的表,因此需要反向生成数据库表,具体操作如下。

  • 在 pycharm 的 terminal 终端中先输入 python manage.py makemigrations 命令,然后回车。

  • 再输入 python manage.py migrate 命令,回车。


6. 编写 ajax

  • 在 img_upload.html 中编写 JS,获取表单文件信息,并利用 ajax 提交至后台,具体代码如下。(需要引入 jquery,请自行引入
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="img-form" enctype="multipart/form-data">
    {% csrf_token %}
    <div style="margin: 50px;">
        <input type="file" name="img" id="img">
    </div>
    <div style="margin: 50px;">
        <input onclick="upload_img()" type="button" value="提交">
    </div>
</form>
<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script type="text/javascript">
    function upload_img() {
        let formData = new FormData($("#img-form")[0]);
        $.ajax({
            url: "/upload_img/", //请求路径
            type: 'POST', // 请求类型
            data: formData, // 请求数据
            dataType: "JSON", // 返回数据格式
            contentType: false, //表示不处理数据
            processData: false,
            cache: false,
            success: function (data) {
                if (data === 1) { 
                    alert("上传成功");
                }else if (data === 0) {
                    alert("上传失败");
                }
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
</script>
</body>
</html>

需要在 form 标签中加入加入**enctype="multipart/form-data"**属性,只有加了这个属性才能进行文件上传。

Django 自带 csrf 验证,所以需要在表单中加入

{% csrf_token %}

用于验证防跨域攻击, 否则后台会报错。

ajax 中需要加入

contentType: false, //表示不处理数据
processData: false,
cache: false,

注意 ajax 请求参数的正确配置,具体请看上面的注释,请求路径为你配置的 urls.py 中对应的上传图片 URL。


7. 编写上传图片函数

  • 在 views.py 中添加上传图片函数,并将该函数注册到 urls.py 中。

  • views.py 代码如下:

from django.http import JsonResponse
from django.shortcuts import render
from app001.models import Image
def img_upload(request):
    file_img = request.FILES['img']  # 获取文件对象
    image = Image()
    image.img = file_img
    try:
        image.save()  # 保存数据
        return JsonResponse(1, safe=False)
    except Exception as e:
        print(e)
        return JsonResponse(0, safe=False)
  • urls.py 代码如下:
from django.contrib import admin
from django.urls import path
from app001 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.get_user),
    path('to_upload_img/', views.to_img_load),  # 跳转至上传图片页面
    path('upload_img/', views.img_upload),  # 上传图片
]

8. 测试图片上传

  • 选择图片,点击提交

  • 观察项目根目录 media 下的 upload 文件夹中是否生成刚刚上传的图片。

  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖 • 1 关注
  • Django
    47 引用 • 72 回帖 • 4 关注
  • AJAX
    26 引用 • 96 回帖
1 操作
zyk 在 2019-07-31 13:00:40 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...