爱站屋博客 - 好东西不私藏,大家一起分享!关于博客 留言板

网站首页 技术教程 正文

vue 多对李瑞英月薪多反序列化上传图片

2019-11-11 技术教程 18 ℃

[db:标签]签:max   string   输入   serial   The   load   不能   NPU   前端   

# 添加学生
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)
data={‘name‘:name,‘img‘:‘upload/‘+image_name,‘cid‘:cid}
print(data)
ss=Stuerializers1a(data=data)
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>
<option v-for="i in aa" :value="i.id">{{i.name}}</option>
</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‘





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

标签:max   string   输入   serial   The   load   不能   NPU   前端   


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

:如果评论未出现,请刷新网页,谢谢合作!

会员中心
搜索
ip签名图
    IP签名图
网站分类
标签列表
文章归档
站点信息
  • 文章总数:112038
  • 页面总数:3
  • 分类总数:12
  • 标签总数:629
  • 评论总数:2060
  • 浏览总数:1241363
爱站云安全认证