神剑山庄资源网 Design By www.hcban.com

1:导入element

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
  <!-- 引入组件库 -->
  <script src="/UploadFiles/2021-04-08/vue.min.js">

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="/UploadFiles/2021-04-08/imageUrl">

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'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x0
    #
    # 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:\Users\user\Desktop\DownTest\media\username\head\head.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,后端分离,element-ui,文件上传

神剑山庄资源网 Design By www.hcban.com
神剑山庄资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
神剑山庄资源网 Design By www.hcban.com

评论“Django后端分离 使用element-ui文件上传方式”

暂无Django后端分离 使用element-ui文件上传方式的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。