图片描述" />
前言
在现代Web应用中，图片上传是一个常见且重要的功能。Django作为强大的Python Web框架，结合Vue.js这样的现代前端框架，能够高效地实现这一功能。本文将详细介绍如何在Django项目中配置图片上传的后端处理，并在Vue前端实现图片的选择、预览和上传功能。
图片上传步骤
1. urls 配置
python">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 配置
python">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 配置
python">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 PillowPillow它提供了丰富的图像处理功能，使用它就可以完成对图像的操作了
前端代码：
<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，所以也可以省略
图片描述" />
