Django + Vue 实现图片上传功能的全流程配置与详细操作指南

前言

    在现代Web应用中，图片上传是一个常见且重要的功能。Django作为强大的Python Web框架，结合Vue.js这样的现代前端框架，能够高效地实现这一功能。本文将详细介绍如何在Django项目中配置图片上传的后端处理，并在Vue前端实现图片的选择、预览和上传功能。

图片上传步骤

1. urls 配置

from django.contrib import admin
from django.urls import path,includefrom django.conf import settings
from django.conf.urls.static import staticurlpatterns = [path('admin/', admin.site.urls),path('app/',include('app.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• static 函数用于定义静态文件的URL模式，它接收两个参数：
  • 第一个参数是settings.MEDIA_URL，它是一个字符串，表示媒体文件的URL前缀。
  • 第二个参数是settings.MEDIA_ROOT，它是一个字符串，表示媒体文件在服务器上的存储路径。

2. settings 配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

1. MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• 这行代码设置了Django项目中媒体文件的根目录。os.path.join是一个Python函数，用于连接多个路径部分，生成一个完整的路径。
• BASE_DIR通常是一个变量，表示Django项目的根目录。这个目录是Django项目中所有其他路径的基准点。
• 'media'是一个子目录，用于存放用户上传的媒体文件，比如图片、视频、文档等。

2. MEDIA_URL = '/media/'

• 这行代码定义了媒体文件的URL前缀。当Django处理URL请求时，如果URL以/media/开头，它就会知道这个请求是指向媒体文件的。

3. models 配置

class ShopModel(models.Model):name = models.CharField(max_length=100)price = models.DecimalField(max_digits=3,decimal_places=2)count = models.IntegerField()info = models.CharField(max_length=200)is_checked = models.BooleanField(default=False)shopimg = models.ImageField(upload_to='imag/',null=True)# 默认状态参数-------------------------------# 保质期---剩余天数protect = models.IntegerField(null=True)def __str__(self):return self.nameclass Meta():db_table = 'shop'

• models.ImageField：这是 Django 的一个字段类型，用于处理图像上传。它继承自 models.FileField，专门用于存储图像文件，比如 JPEG、PNG 等格式。
• upload_to='imag/'：这个参数指定了上传文件的保存路径。当用户上传图片时，Django 会将图片保存在 MEDIA_ROOT 目录下的 imag 文件夹中。
  • 例如，如果你的 MEDIA_ROOT 设置为 /path/to/media，则图片将被保存在 /path/to/media/imag/。
• null=True：这个参数允许字段可以存储空值。也就是说，如果用户没有上传图片，这个字段可以是 NULL，而不是必须有一个文件。

4. 安装Pillow

• 在使用ImageField字段的时候，需要提前安装：pip install Pillow
• Pillow 它提供了丰富的图像处理功能，使用它就可以完成对图像的操作了

前端代码：

<input type="file" accept="image/png" @change="imgChange">

upfile() {​      let formdata = new FormData();​      formdata.append('name',this.shop.name);
​      formdata.append('price',this.shop.price);
​      formdata.append('count',this.shop.count);
​      formdata.append('info',this.shop.info);
​      formdata.append('shopimg',this.shop.shopimg);​      this.$axios.post('http://127.0.0.1:8000/app/shops/',formdata,{
​        headers:{
​          'Content-Type':'multipart/form-data'
​          }
​        }).then((result) => {
​        console.log(result);
​      }).catch((err) => {
​        console.log(err);
​      });
}

FormData：

• FormData 用于创建键值对集合和构造包含文件的请求体，这些键值对可以被用来发送 HTTP 请求。它特别适用于需要上传表单数据，包括文件。
• FormData 对象提供了 append 方法来添加键值对，并且能够自动处理文件上传的边界和编码。使用这种方式，开发者可以轻松地将文件作为二进制数据上传到服务器。
• 使用 Axios 发送 POST 请求，并将 FormData 作为请求体。请求头内容应该修改为：'Content-Type':'multipart/form-data'
• 由于 FormData 会自动设置 Content-Type 为 multipart/form-data，所以也可以省略