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

1:导入element

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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\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)

猜你喜欢

转载自www.cnblogs.com/wanghong1994/p/12913091.html