zoukankan      html  css  js  c++  java
  • Django-----vue结合上传图片

    <div id="goods">
    商品名称:<input type="text" v-model="name"><br>
    商品价格:<input type="text" v-model="price"><br>
    商品图片:<input type="file" id="saveimage"><br>
    <button @click="addgoods()">添加</button>
    </div>
     
    methods:{
                addgoods:function () {
                    var user_id = sessionStorage.getItem('id');
                    this.user_id = user_id;
                    var data = new FormData();
                    data.append('name',this.name);
                    data.append('price',this.price);
                    data.append('id',this.user_id);
                    //1.从input框里获取图片
                    var img = document.getElementById('saveimage').files[0];
                    //2.将图片添加到Formdata中
                    data.append('file',img,img.name);
                    //3.发送axios消息,请求头添加 : Content-Type = multipart/form-data
                    this.axios({
                        url:'/api/api/addgoods/',
                        method:'post',
                        data:data,
                        headers:{'Content-Type':'multipart/form-data'}
                    }).then((res)=>{
                        console.log(res)
                        if(res.data.code==200){
                            this.$router.push({'path':'myindex'})
                        }
                    }).catch((err)=>{
                        console.log(err)
                    })
                }
            }
        
        
    py文件里
    # 添加商品
    class Addgoods(APIView):
        def post(self,request):
            mes={}
            id = request.data.get('id')
            name = request.data.get('name')
            price = request.data.get('price')
            image = request.FILES.get('file')
            if not all([name,price,image]):
                mes['code']=22600
                mes['message']='信息不完整'
            else:
                image_name = datetime.now().strftime('%Y%m%d%H%M%S%f')+image.name
                f = open(os.path.join(settings.UPLOAD_FILE,image_name),'wb')
                for i in image.chunks():
                    f.write(i)
                f.close()
                #注意图片上传的路经
                goods = Goods(name=name,price=price,image_url='http://127.0.0.1:8000/upload/'+image_name,shop_id=id) 
                goods.save()
                mes['code']=200
                mes['message']='添加成功'
            return JsonResponse(mes)
        
    #配置上传图片路径
    #  1、settings 里    # 图片上传目录-----自定义图片的目录不能与系统名重合
    UPLOAD_FILE = os.path.join(BASE_DIR,'upload')
    # 2、主路由urls里  配置   
    #导两个包
    from django.views.static import serve
    from book import settings
    #路由书写
    # 将upload文件夹,共享浏览器访问
    path('upload/<path>',serve,{'document_root':settings.UPLOAD_FILE})
    
  • 相关阅读:
    理财-4
    “大锅”遇险记
    今日份灵感开发
    持续集成简介
    redis clusert分布式集群
    redis 哨兵
    redis 主从复制
    Redis新特性ACL安全策略
    redis 快照持久化RDB和AOF
    redis 基础常用命令
  • 原文地址:https://www.cnblogs.com/xinzaiyuan/p/12382921.html
Copyright © 2011-2022 走看看