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();  觸發上傳圖片的方法。