Django后端分离使用element-ui文件上传

Posted 2021-02-18 wanghong1994

1：导入element

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <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
                    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 {
                imageUrl: ‘‘
            };
        },
        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)
        # 用户名
        # 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
x1a
x00x00x00
IHDRx00x0
        #
        # 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)