前言
在现代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
它提供了丰富的图像处理功能,使用它就可以完成对图像的操作了
前端代码:
<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
,所以也可以省略