vue 多对多反序列化上传图片

# 添加学生
class Addstu1(APIView):
    def post(self, request):
        name = request.data.get('name') #前端的传过来的name
        image = request.FILES.get('file')  
        cid = request.data.get('cid')  #前端下拉框的id
        if not all([name,image]):
            return Response({'code': 10021, 'message': '输入不能为空'})
        image_name = datetime.now().strftime('%Y%m%d%H%M%S%f')+image.name  #时间戳
        image_path = os.path.join(settings.UPLOAD_FILE,image_name)   #路径
        f = open(image_path,'wb')
        for i in image.chunks():
            f.write(i)
        f.close()
        # 把json转成python  因为我的vue前端 下拉框选项是可以多选的
        cid = json.loads(cid) 
　　　　　# 这里需要注意字段img 里填写的图片路径
        data={'name':name,'img':'upload/'+image_name,'cid':cid}
　　　　 # 序列化
        ss=Stuerializers1a(data=data)
　　　　　#  is_vaild 自动验证数据  验证成功则添加
        if ss.is_valid():
　　　　　#添加
            ss.save()  
            return Response({'code': 200, 'message': '添加成功'})
        return Response({'code': 10020, 'message': '添加失败'})


vue页面 

<template>
    <div>
        <h1>添加学生</h1>
        添加学生<input v-model="name">
        添加学生<input type="file" id="ssss">
        所属书籍<select v-model="cid" multiple>  //multiple 可以多选    cid 代表我下拉框的id
            <option v-for="i in aa" :value="i.id">{{i.name}}</option>   // value记住一要绑定  不绑定会出现点一个复选框 全部都会被选择的情况
        </select>
        <button v-on:click="add">添加</button>
    </div>
</template>

<script>
    export default {
        name: "addstu1",
        data:function () {
            return{
                name:'',
                cid:[],
                aa:[]
            }
        },
        mounted() {
            this.axios({
                url:'/api/a/addstu/',
                data:{},
                method:'get'
            }).then(res=>{
                if (res.data.code==200){
                this.aa = res.data.message
                }
            }).catch(err=>{

            })
        },
        methods:{
            add:function () {
                alert(this.cid)
                //下拉框是多选的  所以需要把cid转成字符串
                let cid = JSON.stringify(this.cid);
                var  data = new FormData;
                data.append('name',this.name);
                data.append('cid',cid);
                var image = document.getElementById('ssss').files[0];
                data.append('file',image,image.name);
                this.axios({
                url:'/api/a/addstu1/',
                data:data,
                method:'post'
            }).then(res=>{
                console.log(res)
                this.$router.push({
                    name:'showstu'
                })
            }).catch(err=>{

            })
            }
        }
    }
</script>

<style scoped>

</style>


序列化 

# 多对多添加学生
class Stuerializers1a(serializers.Serializer):
    name = serializers.CharField(max_length=32) #和模型里的一致
    img = serializers.CharField(max_length=255) 
    cid = serializers.ListField()  # ListField 可以添加多个  它是表里没有的字段是前端下拉框的id
    def create(self,data):
        cid = data.pop('cid')  # 弹出cid
        ss = Stu.objects.create(**data)  #添加stu表
        ss.duo.set(cid)  #添加stu 外键 duo
        return ss

模型

# 课程
class Kc(Base, models.Model):
    name = models.CharField(max_length=32)
    price = models.DecimalField(max_digits=9, decimal_places=2)
    # sss_set =
    class Meta:
        db_table = 'kc'
# 学生表
class Stu(Base, models.Model):
    name = models.CharField(max_length=32)
    img = models.CharField(max_length=255)
    # related_name='sss'  起个别名  当反向查询的时候他就相
    # 当于课程表里的外键了 sss_set
    # 可以直接代替 stu表里的dou
    duo = models.ManyToManyField(to='Kc', related_name='sss')  #
    class Meta:
        db_table = 'stu'

重要的还有settings.py里面要设置图片存放的地址

UPLOAD_FILE= os.path.join(BASE_DIR,'upload')#照片存放在根目录upload文件下

以及主路由的分发路由：
需要导两个包

from django.views.static import serve
from sss import settings

拼接路径

path('upload/<path>',serve,{'document_root':settings.UPLOAD_FILE})