图书封面的上传

• 前端

  <template>
      <div>
          <p>书籍名称：<input type="text" v-model="name"  ></p>
          <p>价格：<input type="text" v-model="price" ></p>
          <p>数量：<input type="text" v-model="number" ></p>
          <p>作者：<input type="text" v-model="author" ></p>
          <p>作者：<input type="file" @change="getfilr($event)" ></p>
  
          <p>
              <select v-model="booktype">
                  <option v-for="i in type_list"></option>
              </select>
          </p>
          <p><input type="submit"  @click="addbook()" value="添加"></p>
  
      </div>
  </template>
  
  <script>
  import {drf_book_type_all_info,drf_book_bookadd} from '../../axios_send/api'
  import axios from 'axios'
  export default {
      name:"book_bookadd",
      data() {
          return {
              name:'',
              price:'',
              author:'',
              number:'',
              type_list:Array(),
              booktype:''
          }
      },
      methods: {
          get_type(){
              drf_book_type_all_info()
              .then(res=>{
                  this.type_list = res.data
              })
          },
          addbook(){
              var form_data = new FormData()
              form_data.append("name",this.name)
              form_data.append("price",this.price)
              form_data.append("number",this.number)
              form_data.append("author",this.author)
              form_data.append("booktype",this.booktype)
              form_data.append("pic",this.file)
              axios({
                  url:"http://127.0.0.1:8000/app03/books/",
                  method : "post",
                  data:form_data
  
              }).then(res=>{
                  alert(res.msg)
              })
          },
          getfilr(event){
              this.file = event.target.files[0]
          }
      },
      created(){
          this.get_type()
      }
  }
  </script>
  

• 后端

  class Books(APIView):
      def post(self,request):
          data = request.data
          #第一种用serializer
          # try:
          #     booktype= BookType.objects.get(name=data["booktype"])
          #     id = booktype.id
          #     data["booktype"] = id
          #
          #     serializer = BookSerializer1(data=data)
          #     serializer.is_valid()
          #     # print(serializer.errors)
          #     serializer.save()
          #     res_data = {
          #         'code':200,
          #         "msg":"success"
          #     }
          #
          #     return Response(data=res_data)
          # except Exception as e:
          #     # raise e
          #     res_data = {
          #         'code': 500,
          #         "msg": "fail"
          #     }
          #
          #     return Response(data=res_data)
          #第二种不用serializers
          try:
              with open(data["pic"].name,"wb") as f:
                  for i in data["pic"].chunks():
                      f.write(i)
              booktype = BookType.objects.get(name=data["booktype"])
              Book.objects.create(name=data["name"],price=data["price"],
                                  number = data["number"],author=data["author"],
                                  booktype=booktype)
              res_data = {
                  'code':200,
                  "msg":"success"
              }
              return Response(data=res_data)
          except Exception as e:
              # raise e
              res_data = {
                  'code': 500,
                  "msg": "fail"
              }
              return Response(data=res_data)