1 Html

          <el-form-item label="图片" prop="picUrl" :label-width="formLabelWidth">

            <el-upload

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

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

              list-type="picture-card"

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

              auto-upload

              :headers="headers"  // 请求头

              ref="upload">

              <i class="el-icon-plus"></i>

            </el-upload>

          </el-form-item>

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("新增成功");

          }

        }

      });

    },