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

文章目录

• 前言
• 图片上传步骤
• • 1. urls 配置
  • 2. settings 配置
  • 3. models 配置
  • 4. 安装Pillow

    ---

    前言

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

    图片上传步骤

    1. urls 配置

    from django.contrib import admin
    from django.urls import path,include
    from django.conf import settings
    from django.conf.urls.static import static
    urlpatterns = [
        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.name
                class 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 它提供了丰富的图像处理功能，使用它就可以完成对图像的操作了

                  前端代码：

                  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，所以也可以省略

                    ---