el-upload上传图片方法

一、

自动上传

就是在选择图片后立马上传

<el-upload
                  action=""
                  :http-request="ImgUploadSectionFile"
                  list-type="picture-card"
                  :auto-upload="true"
                  ref="uploadLevelIcon"
                  :limit="1"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="RemoveLogo(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>

// 图片上传方法
    async IconUpload(file) {
      const res = await IconUpload(file);
      console.log(res);
      this.formData.logo = res.data;
      console.log("this.formData.id:", this.formData.id);
    },
    ImgUploadSectionFile(param) {
      console.log(param);
      let formdata = new FormData(); //formdata格式
      formdata.append("file", param.file);
      // 修改的时候传入id
      if (this.type === "修改") {
        formdata.append("id", this.iconId);
      }
      this.IconUpload(formdata);
    },

:http-request覆盖默认上传行为，自定义上传方法，

:auto-upload="true" 自动上传。就会触发自定义的上传方法。

二、手动上传

就是在点击提交按钮的时候再触发上传

<el-upload
                  action=""
                  :http-request="ImgUploadSectionFile"
                  list-type="picture-card"
                  :auto-upload="true"
                  ref="uploadLevelIcon"
                  :limit="1"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download"></i>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="RemoveLogo(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>

:http-request覆盖默认上传行为，自定义上传方法，

:auto-upload="false" 不自动上传。

// 图片上传方法
    ImgUploadSectionFile(param) {
      this.submitForm.append("file", param.file);
    },

    // 新增
    async newIncreased() {
      if (!this.submitForm.get("file")) {
        this.$message.error("请上传水印图片");
        return false;
      }
      // this.submitForm = new FormData();
      this.submitForm.append("name", this.formData.name);
      const res = await newIncreased(this.submitForm);
      if (res === null) {
        this.isshow = false;
        this.getWaterMarkList();
      }
    },


    submitAdd(newadd) {
      this.$refs[newadd].validate((valid) => {
        if (valid) {
          this.$refs.uploadIconnew.submit(); // submit此方法会自动触发 图片上传方法 ImgUploadSectionFile
          // 新增
          this.newIncreased();
        } else {
          console.log("error submit！");
          return false;
        }
      });
    },

点击提交按钮的时候通过    this.$refs.uploadIconnew.submit();  触发上传图片的方法。