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

您的位置:首頁技術文章
文章詳情頁

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

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

1:導入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 >更新社團封面</h1> <div style='text-align: center'> <el-upload:data= 'datas'// 攜帶的參數:headers='headers' // 請求頭 name='image' {% comment %} 后端接收的參數名 {% endcomment %} action='/show/images/' {% comment %} 上傳路由地址 {% endcomment %} :show-file-list='false' :on-success='handleAvatarSuccess' {% comment %} 文件上傳成功時的鉤子 {% endcomment %} :before-upload='beforeAvatarUpload'> {% comment %} 上傳文件之前的鉤子,參數為上傳的文件 {% 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:{}, // 請求頭是個對象datas:{}, // 對象imageUrl: ’’ }; },create(){this.headers.authenticate = sessionStorage.getItem(’token’) // 設置請求頭帶tokenthis.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 APIViewfrom SocietyPlat import settingsfrom django.shortcuts import render, redirect, HttpResponsefrom Databases import modelsfrom django.http import JsonResponseimport 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組件完成一個上傳文件的功能。但是不知道是不是因為我沒有發現,我翻遍了官網都沒有找到這個組件點擊上傳以后發的是什么樣的數據請求。

終于我好像突然想起來瀏覽器的開發者工具可以查看發出的請求

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

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

點擊上傳到服務器以后前臺就會發出請求,我們就可以使用devtool看具體的請求頭等等數據,具體位置在這里:

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

點擊這個upload,找一找,我們就會發現最下面有一個file

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

這應該就是我們要上傳的文件。可以看見它是以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文件上傳方式就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Django
相關文章:
主站蜘蛛池模板: 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 检验科改造施工_DSA手术室净化_导管室装修_成都特殊科室建设厂家_医疗净化工程公司_四川华锐 | 直齿驱动-新型回转驱动和回转支承解决方案提供商-不二传动 | 散热器-电子散热器-型材散热器-电源散热片-镇江新区宏图电子散热片厂家 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 济南网站建设_济南网站制作_济南网站设计_济南网站建设公司_富库网络旗下模易宝_模板建站 | 博医通医疗器械互联网供应链服务平台_博医通 | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | 爆破器材运输车|烟花爆竹运输车|1-9类危险品厢式运输车|湖北江南专用特种汽车有限公司 | 陕西鹏展科技有限公司| 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 氢氧化钙设备_厂家-淄博工贸有限公司 | 胃口福饺子加盟官网_新鲜现包饺子云吞加盟 - 【胃口福唯一官网】 | 特材真空腔体_哈氏合金/镍基合金/纯镍腔体-无锡国德机械制造有限公司 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 变压器配件,变压器吸湿器,武强县吉口变压器配件有限公司 | 二手Sciex液质联用仪-岛津气质联用仪-二手安捷伦气质联用仪-上海隐智科学仪器有限公司 | 螺杆泵_中成泵业| 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 北京西风东韵品牌与包装设计公司,创造视觉销售力! | 清管器,管道清管器,聚氨酯发泡球,清管球 - 承德嘉拓设备 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 机制砂选粉机_砂石选粉机厂家-盐城市助成粉磨科技有限公司 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 伶俐嫂培训学校_月嫂培训班在哪里报名学费是多少_月嫂免费政府培训中心推荐 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 德国GMN轴承,GMN角接触球轴承,GMN单向轴承,GMN油封,GMN非接触式密封 | 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 工业风机_环保空调_冷风机_工厂车间厂房通风降温设备旺成服务平台 | 中视电广_短视频拍摄_短视频推广_短视频代运营_宣传片拍摄_影视广告制作_中视电广 | 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 消泡剂_水处理消泡剂_切削液消泡剂_涂料消泡剂_有机硅消泡剂_广州中万新材料生产厂家 | 特材真空腔体_哈氏合金/镍基合金/纯镍腔体-无锡国德机械制造有限公司 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) |