iView组件+Django实现前后端分离上传图片

iView组件+Django实现前后端分离上传图片

#1 环境

Vue

"vue": "^2.5.2",
"axios": "^0.19.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"view-design": "^4.0.0"

Django

Django==2.0.7
djangorestframework==3.8.2

这里只展示涉及到上传图片部分的代码

#2 前端

test.vue

<template>
	<div>
		<Upload
			:show-upload-list="false"
			:default-file-list="false"
			:format="['jpg','jpeg','png']"
			:max-size="2048"
			:on-success="uploadSuccess"
			:on-error="uploadError"
			:on-format-error="handleFormatError"
			:on-exceeded-size="handleMaxSize"
			:before-upload="handleBeforeUpload"
			multiple
			type="drag"
			action="http://127.0.0.1:19900/api/test/create-imag/"
			style="display: inline-block;width:58px;"
		>
			<div style="width: 58px;height:58px;line-height: 58px;">
				<Icon type="ios-camera" size="20"></Icon>
			</div>
		</Upload>
	</div>
</template>
<script>
    export default {
        data () {
            return {}
        },
        methods: {
            uploadSuccess (response, file, fileList) { // 文件上传成功时的钩子，返回字段为 response, file, fileList
                this.$Message.success("上传成功");
            },
            uploadError(error, file, fileList){ // 文件上传失败时的钩子，返回字段为 error, file, fileList
                this.$Message.error("上传失败");

            },
            handleFormatError(file, fileList){ // 文件格式验证失败时的钩子，返回字段为 file, fileList

            },
            handleMaxSize(file, fileList){ // 文件超出指定大小限制时的钩子，返回字段为 file, fileList

            },
            handleBeforeUpload(response){ // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传

            }
        },
    }
</script>
<style>
	.demo-upload-list{
		display: inline-block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0,0,0,.2);
		margin-right: 4px;
	}
	.demo-upload-list img{
		width: 100%;
		height: 100%;
	}
	.demo-upload-list-cover{
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.6);
	}
	.demo-upload-list:hover .demo-upload-list-cover{
		display: block;
	}
	.demo-upload-list-cover i{
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>

prop	注释
show-upload-list	是否显示已上传文件列表
default-file-list	设置默认已上传的列表
format	支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用
max-size	文件大小限制，单位 kb
on-success	文件上传成功时的钩子，返回字段为 response, file, fileList
on-error	文件上传失败时的钩子，返回字段为 error, file, fileList
on-format-error	文件格式验证失败时的钩子，返回字段为 file, fileList
on-exceeded-size	文件超出指定大小限制时的钩子，返回字段为 file, fileList
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
multiple	可以选择多个文件
type	可以拖拽上传
action	前后端分离的后端接口(完整的接口url,如果只填路由,默认ip:port是前端的地址)

前端效果:

---

#3 后端

models.py

class TestModel(models.Model):

    image = models.ImageField(upload_to="blog_code/static/images/blog",default="") # upload_to : 图片保存路径 

#3.1 原生的Django

def post(self,request):

    models.TestModel.objects.create(
        image = request.data["file"]
    )

    return Response({
        "success": False,
        "msg": "新增图片",
        "results": ""
    }, status=status.HTTP_200_OK)

原生的django, 获取文件在request.data[“file”]里面,获取一个文件对象

#3.1 Django Rest Framework

视图

from utils.common.mixins.mixin import MyCreateModeMixin
from app_test.views.api.create_imag.create_test_serializer import CreateImagSerializer
from rest_framework import status
from rest_framework.response import Response
from app_test import models

class CreateImagViewSet(MyCreateModeMixin):
    """新增图片"""
    authentication_classes = () # 验证
    permission_classes = () # 权限
    msg_create = "新增图片" # 提示信息
    results_display = False  # 是否显示序列化信息, 默认显示
    serializer_class = CreateImagSerializer # 序列化类

序列化

from app_test import models
from utils.common.serializers.serializer import MySerializerBase




class CreateImagSerializer(MySerializerBase):
    """新增测试-序列化"""

    class Meta:
        model = models.TestModel
        fields = ["image",]

    def create(self, validated_data):
        obj = models.TestModel.objects.create(
            image = self.context["request"].data.get("file",None)
        )

        return obj

DRF中文件存在self.context[“request”].data.get(“file”,None)里面

这样就能简单的实现前后端分离上传图片功能