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

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

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

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

1:導(dǎo)入element

<!-- 引入樣式 --> <link rel='stylesheet' rel='external nofollow' > <!-- 引入組件庫(kù) --> <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(’上傳頭像圖片大小不能超過(guò) 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) # 如果沒(méi)有就創(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ì)于向我這樣一只前端和后端的雙咸魚來(lái)說(shuō)寫一個(gè)不了解的接口實(shí)在是太難受了,前端不知道在哪找數(shù)據(jù),后端又不知道處理什么樣的數(shù)據(jù)。

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

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

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

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() # 獲取上傳的文件,如果沒(méi)有文件,則默認(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)文章:
主站蜘蛛池模板: nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 上海质量认证办理中心| 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 高铝矾土熟料_细粉_骨料_消失模_铸造用铝矾土_铝酸钙粉—嵩峰厂家 | UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器(上海)有限公司 | 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | pbt头梳丝_牙刷丝_尼龙毛刷丝_PP塑料纤维合成毛丝定制厂_广州明旺 | 彩信群发_群发彩信软件_视频短信营销平台-达信通| 桥架-槽式电缆桥架-镀锌桥架-托盘式桥架 - 上海亮族电缆桥架制造有限公司 | 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 永嘉县奥阳陶瓷阀门有限公司 | 有机废气处理-rto焚烧炉-催化燃烧设备-VOC冷凝回收装置-三梯环境 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 衬氟止回阀_衬氟闸阀_衬氟三通球阀_衬四氟阀门_衬氟阀门厂-浙江利尔多阀门有限公司 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器| 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 污泥烘干机-低温干化机-工业污泥烘干设备厂家-焦作市真节能环保设备科技有限公司 | 在线PH计-氧化锆分析仪-在线浊度仪-在线溶氧仪- 无锡朝达 | 湖南自考_湖南自学考试网 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | 涡轮流量计_LWGY智能气体液体电池供电计量表-金湖凯铭仪表有限公司 | 耐酸碱泵-自吸耐酸碱泵型号「品牌厂家」立式耐酸碱泵价格-昆山国宝过滤机有限公司首页 | 油缸定制-液压油缸厂家-无锡大鸿液压气动成套有限公司 | 数控走心机-走心机价格-双主轴走心机-宝宇百科 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | 贵州水玻璃_-贵阳花溪闽兴水玻璃厂 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 乙炔气体报警装置|固定式氯化氢检测仪|河南驰诚电气百科 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 西安文都考研官网_西安考研辅导班_考研培训机构_西安在职考研培训 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 七维官网-水性工业漆_轨道交通涂料_钢结构漆 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 |