Django后端分离 使用element-ui文件上传方式
时间:2022-07-27
本文章向大家介绍Django后端分离 使用element-ui文件上传方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1:导入element
<!-- 引入样式 --
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow"
<!-- 引入组件库 --
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" </script
<!-- 引入Vue --
<script src="https://unpkg.com/element-ui/lib/index.js" </script
2:前端文件
css:
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
html:
{% comment %} 上传图片 {% endcomment %}
<div id="profile"
<h1 style="text-align: center" 更新社团封面</h1
<div id="app" style="text-align: center"
<el-upload :data= "datas" // 携带的参数 :headers="headers" // 请求头
name="image" {% comment %} 后端接收的参数名 {% endcomment %}
class="avatar-uploader"
action="/show/images/" {% comment %} 上传路由地址 {% endcomment %}
:show-file-list="false"
:on-success="handleAvatarSuccess" {% comment %} 文件上传成功时的钩子 {% endcomment %}
:before-upload="beforeAvatarUpload" {% comment %} 上传文件之前的钩子,参数为上传的文件 {% endcomment %}
<img v-if="imageUrl" :src="imageUrl" class="avatar"
<i v-else class="el-icon-plus avatar-uploader-icon" </i
</el-upload
</div
</div
{% comment %} 上传图片 {% endcomment %}
# JS:
<script
var Main = {
data() {
return { headers:{}, // 请求头是个对象 datas:{}, // 对象
imageUrl: ''
};
}, create(){
this.headers.authenticate = sessionStorage.getItem('token') // 设置请求头带token
this.datas.data = "userHead" // 设置请求参数
}
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log("imageUrl",this.imageUrl)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script
3:后端文件
路由:
# 预览图片url("show/images/$", add_image.Image.as_view()),
py文件:from rest_framework.views import APIView
from SocietyPlat import settings
from django.shortcuts import render, redirect, HttpResponse
from Databases import models
from django.http import JsonResponse
import os
# 获取相对路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
class Image(APIView):
def post(self, request):
# 接收文件
file_obj = request.FILES.get('image',None) style = requetst.data.get('data')
# 用户名
# username = str(request.data.get("username"))
username = "Wang"
print("file_obj",file_obj.name)
# 判断是否存在文件夹
head_path = BASE_DIR + "media{}head".format(username).replace(" ","")
print("head_path",head_path)
# 如果没有就创建文件路径
if not os.path.exists(head_path):
os.makedirs(head_path)
# print("文件名",file_obj.name) # 文件名 name.png
#
# print("文件二进制",file_obj.read()) # 文件二进制 b'x89PNGrnx1anx00x00x00rIHDRx00x0
#
# print("判断文件 2.5M",file_obj.multiple_chunks(chunk_size=None)) # 文件大小 False小于2.5M
#
# print("文件大小",file_obj.size) # 文件大小 12651
#
# print("文件编码",file_obj.charset) # None
#
# print("随文件一起上传的内容类型标题",file_obj.content_type) # image/png
#
# print("包含传递给content-type标头的额外参数的字典",file_obj.content_type_extra) # {}
#
# print("text/content-types提供的utf8字符集编码",file_obj.charset) # None
#
#
# 图片后缀
head_suffix = file_obj.name.split(".")[1]
print("图片后缀",head_suffix) # 图片后缀 png
# 储存路径
file_path = head_path + "{}".format("head." + head_suffix)
file_path = file_path.replace(" ","")
print("储存路径", file_path) # C:UsersuserDesktopDownTestmediausernameheadhead.png
# 上传图片
with open(file_path, 'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
message = {}
message['code'] = 200
# 返回图片路径
back_path = 'static{}head{}'.format(username,"head." + head_suffix).replace(" ","")
message['image'] = back_path
return JsonResponse(message)
补充知识:django后台接口处理element-ui的el-upload组件form data类型数据
对于向我这样一只前端和后端的双咸鱼来说写一个不了解的接口实在是太难受了,前端不知道在哪找数据,后端又不知道处理什么样的数据。
现在有这样一个需求,我需要使用element-ui中的el-upload组件完成一个上传文件的功能。但是不知道是不是因为我没有发现,我翻遍了官网都没有找到这个组件点击上传以后发的是什么样的数据请求。
终于我好像突然想起来浏览器的开发者工具可以查看发出的请求
于是我们可以写这么一个组件来一探究竟:
点击上传到服务器以后前台就会发出请求,我们就可以使用devtool看具体的请求头等等数据,具体位置在这里:
点击这个upload,找一找,我们就会发现最下面有一个file
这应该就是我们要上传的文件。可以看见它是以form data的形式上传的。
所以我们就可以写对应的后端接口了。
这里给一个接口的demo
def writeFile(filePath, file):
with open(filePath, "wb") as f:
if file.multiple_chunks():
for content in file.chunks():
f.write(content)
else:
data=file.read() ###.decode('utf-8')
f.write(data)
def uploadFile(request):
if request.method == "POST":
fileDict = request.FILES.items()
# 获取上传的文件,如果没有文件,则默认为None
if not fileDict:
return JsonResponse({'msg': 'no file upload'})
for (k, v) in fileDict:
print("dic[%s]=%s" %(k,v))
fileData = request.FILES.getlist(k)
for file in fileData:
fileName = file._get_name()
filePath = os.path.join(settings.TEMP_FILE_PATH, fileName)
print('filepath = [%s]'%filePath)
try:
writeFile(filePath, file)
except:
return JsonResponse({'msg': 'file write failed'})
return JsonResponse({'msg': 'success'})
另外想要在前端获取后端返回的请求的话可以使用on-success、on-error、on-exceed这几个钩子函数,具体可以在element ui的官网找到
以上这篇Django后端分离 使用element-ui文件上传方式就是小编分享给大家的全部内容了,希望能给大家一个参考。
- Ansible基本配置以及使用示例
- redis超时原因系统性排查
- overlayfs存储驱动的使用以及技术探究
- 分页解决方案 之 分页算法——Pager_SQL的详细使用方法和注意事项
- 利用虚拟硬盘(把内存当作硬盘)来提高数据库的效率(目前只针对SQL Server 2000)可以提高很多
- 分页解决方案 之 分页算法——Pager_SQL的思路和使用方法
- 让你的笔记本更快一点——我的笔记本的性能测试和虚拟硬盘(把内存当成硬盘)的使用感觉
- 分页解决方案 之 数据访问函数库——另类的思路、另类的写法,造就了不一样的发展道路。
- 分页解决方案 之 QuickPager的使用方法(在UserControl里面使用分页控件的方法)
- 分页解决方案 之 QuickPager的使用方法(URL分页、自动获取数据)
- 分页解决方案 之 QuickPager的使用方法(PostBack分页、自定义获取数据)
- QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.09.07更新】
- 分页解决方案 之 QuickPager的使用方法(PostBack分页、自动获取数据)
- 【自然框架】之鼠标点功能现(二):表单控件的“应用”—— 代码?只写需要的!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何做攻击溯源自动化
- Java多线程相关知识点扩展实例分析
- 巧用 Nsenter 调取宿主机工具调试容器内程序
- 如何在 Kubernetes 集群中集成 Kata
- Pytest实战
- Native 与 Weex 交互通用解决方案
- 20个MySQL运维案例,请查收!
- Unity3D中使用Joystick Pack实现摇杆控制
- Unity3D使用Timeline实现过场动画
- Oracle中ascii为0的陷阱
- VBA解析VBAProject 05——提取模块代码
- VBA解析VBAProject 06——清除VBA工程密码
- VBA解析VBAProject 07——隐藏模块
- python测试开发django-83.Dockerfile部署django项目
- python测试开发django-82.线上部署设置DEBUG=FALSE