Element 单独上传图片,不和form表单一起

1 Html

          

            

              v-model="form.picUrl"    // 表单提交对象

              :action="actionImg"  // 图片上传地址,

              list-type="picture-card"

              :on-success="successImg"  //图片上传完成的回调

              auto-upload

              :headers="headers"  // 请求头

              ref="upload">

              

            

          

2 Js

  // 图片上传的 请求头

  computed: {

    headers() {

      return {

        Authorization: window.sessionStorage.getItem("token")

      };

    }

  }

    // 图片上传完成的回调

    successImg(response, file, fileList) {

      if (response) {  // 按各自后端需要来写,图片数据都在response里面

        this.form.picUrl = response.data.url;  

        this.form.remotePath = response.data.remotePath; 

      }

    },

    // 确定按钮

    addSubmit(from) {

      this.$refs[from].validate(async valid => {

        if (valid) { 

          if (this.form.picUrl == "") { //判断图片有没有上传成功

            this.$message.error("请选择图片");

            return false;

          }

          // 成功 提交数据

          let res = await this.$axios.post("/product/save", this.form);

          if (res.data.code != 0) {

            this.$message.error(res.data.message);

          } else if (res.data.code == 0) {

            this.$message.success("新增成功");

          }

        }

      });

    },

你可能感兴趣的:(Element 单独上传图片,不和form表单一起)