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();  触发上传图片的方法。