电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Django后端分離 使用element-ui文件上傳方式

瀏覽:67日期:2024-09-26 18:46:04

1:導(dǎo)入element

<!-- 引入樣式 --> <link rel='stylesheet' 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 >更新社團(tuán)封面</h1> <div style='text-align: center'> <el-upload:data= 'datas'// 攜帶的參數(shù):headers='headers' // 請(qǐng)求頭 name='image' {% comment %} 后端接收的參數(shù)名 {% endcomment %} action='/show/images/' {% comment %} 上傳路由地址 {% endcomment %} :show-file-list='false' :on-success='handleAvatarSuccess' {% comment %} 文件上傳成功時(shí)的鉤子 {% endcomment %} :before-upload='beforeAvatarUpload'> {% comment %} 上傳文件之前的鉤子,參數(shù)為上傳的文件 {% endcomment %}<img v-if='imageUrl' :src='http://www.hdgsjgj.cn/bcjs/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:{}, // 請(qǐng)求頭是個(gè)對(duì)象datas:{}, // 對(duì)象imageUrl: ’’ }; },create(){this.headers.authenticate = sessionStorage.getItem(’token’) // 設(shè)置請(qǐng)求頭帶tokenthis.datas.data = 'userHead' // 設(shè)置請(qǐng)求參數(shù)} 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:后端文件

路由:# 預(yù)覽圖片url('show/images/$', add_image.Image.as_view()),py文件:from rest_framework.views import APIViewfrom SocietyPlat import settingsfrom django.shortcuts import render, redirect, HttpResponsefrom Databases import modelsfrom django.http import JsonResponseimport os# 獲取相對(duì)路徑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) # 如果沒有就創(chuàng)建文件路徑 if not os.path.exists(head_path): os.makedirs(head_path) # print('文件名',file_obj.name) # 文件名 name.png # # print('文件二進(jìn)制',file_obj.read()) # 文件二進(jìn)制 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('隨文件一起上傳的內(nèi)容類型標(biāo)題',file_obj.content_type) # image/png # # print('包含傳遞給content-type標(biāo)頭的額外參數(shù)的字典',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 # 儲(chǔ)存路徑 file_path = head_path + '{}'.format('head.' + head_suffix) file_path = file_path.replace(' ','') print('儲(chǔ)存路徑', 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)

補(bǔ)充知識(shí):django后臺(tái)接口處理element-ui的el-upload組件form data類型數(shù)據(jù)

對(duì)于向我這樣一只前端和后端的雙咸魚來說寫一個(gè)不了解的接口實(shí)在是太難受了,前端不知道在哪找數(shù)據(jù),后端又不知道處理什么樣的數(shù)據(jù)。

現(xiàn)在有這樣一個(gè)需求,我需要使用element-ui中的el-upload組件完成一個(gè)上傳文件的功能。但是不知道是不是因?yàn)槲覜]有發(fā)現(xiàn),我翻遍了官網(wǎng)都沒有找到這個(gè)組件點(diǎn)擊上傳以后發(fā)的是什么樣的數(shù)據(jù)請(qǐng)求。

終于我好像突然想起來瀏覽器的開發(fā)者工具可以查看發(fā)出的請(qǐng)求

于是我們可以寫這么一個(gè)組件來一探究竟:

Django后端分離 使用element-ui文件上傳方式

點(diǎn)擊上傳到服務(wù)器以后前臺(tái)就會(huì)發(fā)出請(qǐng)求,我們就可以使用devtool看具體的請(qǐng)求頭等等數(shù)據(jù),具體位置在這里:

Django后端分離 使用element-ui文件上傳方式

點(diǎn)擊這個(gè)upload,找一找,我們就會(huì)發(fā)現(xiàn)最下面有一個(gè)file

Django后端分離 使用element-ui文件上傳方式

這應(yīng)該就是我們要上傳的文件。可以看見它是以form data的形式上傳的。

所以我們就可以寫對(duì)應(yīng)的后端接口了。

這里給一個(gè)接口的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() # 獲取上傳的文件,如果沒有文件,則默認(rèn)為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’})

另外想要在前端獲取后端返回的請(qǐng)求的話可以使用on-success、on-error、on-exceed這幾個(gè)鉤子函數(shù),具體可以在element ui的官網(wǎng)找到

以上這篇Django后端分離 使用element-ui文件上傳方式就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Django
相關(guān)文章:
主站蜘蛛池模板: SMC-ASCO-CKD气缸-FESTO-MAC电磁阀-上海天筹自动化设备官网 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 哈尔滨治「失眠/抑郁/焦虑症/精神心理」专科医院排行榜-京科脑康免费咨询 一对一诊疗 | 山西3A认证|太原AAA信用认证|投标AAA信用证书-山西AAA企业信用评级网 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 冷油器-冷油器换管改造-连云港灵动列管式冷油器生产厂家 | 山东包装,山东印刷厂,济南印刷厂-济南富丽彩印刷有限公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | FFU_空气初效|中效|高效过滤器_空调过滤网-广州梓净净化设备有限公司 | 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | 北京开业庆典策划-年会活动策划公司-舞龙舞狮团大鼓表演-北京盛乾龙狮鼓乐礼仪庆典策划公司 | Dataforth隔离信号调理模块-信号放大模块-加速度振动传感器-北京康泰电子有限公司 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 派财经_聚焦数字经济内容服务平台 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 武汉刮刮奖_刮刮卡印刷厂_为企业提供门票印刷_武汉合格证印刷_现金劵代金券印刷制作 - 武汉泽雅印刷有限公司 | 沈飞防静电地板__机房地板-深圳市沈飞防静电设备有限公司 | 心肺复苏模拟人|医学模型|急救护理模型|医学教学模型上海康人医学仪器设备有限公司 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 立式硫化罐-劳保用品硫化罐-厂家直销-山东鑫泰鑫硫化罐厂家 | 湿地保护| 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 高博医疗集团上海阿特蒙医院 | 微波消解仪器_智能微波消解仪报价_高压微波消解仪厂家_那艾 | 硬齿面减速机[型号全],ZQ减速机-淄博久增机械 | 冷油器-冷油器换管改造-连云港灵动列管式冷油器生产厂家 | 千斤顶,液压千斤顶-力良企业,专业的液压千斤顶制造商,shliliang.com | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 电缆接头-防爆电缆接头-格兰头-金属电缆接头-防爆填料函 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛婚外情取证-青岛王军侦探事务所 | 成都LED显示屏丨室内户外全彩led屏厂家方案报价_四川诺显科技 |