资源管理系统Day4

Day4

前几天懒得数了，直接接着

完善物品管理页面

1. axios请求模块化：/api/下建立自己的文件夹，后以文件夹命名.js
2. 新物品的提交：

• 需要除去提交img的自动上传：action:"随便写"

• :on-change="changeFile"。用来获取图片

• 在data(){}下写fileList:[]，用来暂存图片

    // 提交新物品
    submitButton(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitForm()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取图片对象
    changeFile(file, fileList) {
      console.log(fileList);
      //选择文件后，给fileList对象赋值
      this.fileList = fileList
    },
    // 正式提交新物品
    submitForm(){
      let formData = new FormData()
      this.items.files = this.fileList[0].raw
      console.log(this.fileList[0].raw)
      // 将form表单中的值都赋值给FormData传递给后台
      for(let key in this.items){
        console.log(this.items[key])
        formData.append(key,this.items[key])
      }
      this.axios.post("/admgoods/addGoods",formData,{
        headers:{"Content-type": "multipart/form-data"}
      }).then((response) => {
        console.log("提交成功-----",response.data);
      })
    }

• 有一个Bug，就是提交表单时说validate是undefined，只要把ElementUI原来的this.$refs[items]validate改为this.$refs.items.validate就好