网站如何做付费,wordpress 手机菜单栏插件,展厅设计制作公司会计分录,微博通 wordpress文章目录 前言图片上传步骤1. urls 配置2. settings 配置3. models 配置4. 安装Pillow 前言 在现代Web应用中#xff0c;图片上传是一个常见且重要的功能。Django作为强大的Python Web框架#xff0c;结合Vue.js这样的现代前端框架#xff0c;能够高效地实现这一功能。本文将… 文章目录 前言图片上传步骤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,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_rootsettings.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_length100)price models.DecimalField(max_digits3,decimal_places2)count models.IntegerField()info models.CharField(max_length200)is_checked models.BooleanField(defaultFalse)shopimg models.ImageField(upload_toimag/,nullTrue)# 默认状态参数-------------------------------# 保质期---剩余天数protect models.IntegerField(nullTrue)def __str__(self):return self.nameclass Meta():db_table shopmodels.ImageField这是 Django 的一个字段类型用于处理图像上传。它继承自 models.FileField专门用于存储图像文件比如 JPEG、PNG 等格式。upload_toimag/这个参数指定了上传文件的保存路径。当用户上传图片时Django 会将图片保存在 MEDIA_ROOT 目录下的 imag 文件夹中。 例如如果你的 MEDIA_ROOT 设置为 /path/to/media则图片将被保存在 /path/to/media/imag/。 nullTrue这个参数允许字段可以存储空值。也就是说如果用户没有上传图片这个字段可以是 NULL而不是必须有一个文件。
4. 安装Pillow 在使用ImageField字段的时候需要提前安装pip install PillowPillow 它提供了丰富的图像处理功能使用它就可以完成对图像的操作了 前端代码 input typefile acceptimage/png changeimgChangeupfile() { 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所以也可以省略
