vue el-upload手動上傳實現(xiàn)過程

更新時間：2024年06月12日 16:14:55 作者：不想996了的小姑娘

這篇文章主要介紹了vue el-upload手動上傳實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue el-upload手動上傳

        ```vue
        <el-upload v-model="xlsFile" ref="fileUpload" :limit="1" accept=".xls, .xlsx" action="#" :multiple="false"
          :auto-upload="false" :before-upload="beforeFileUpload" :on-preview="preview" :on-change="fileChange"
          :http-request="uploadHttpRequest" :on-exceed="exceed" :on-remove="fileRemove" :on-success="fileSuccess">
          <el-button size="small" type="primary">
            導入文件
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <div class="el-upload__tip" style="color: rgba(255, 255, 255, 0.65)" slot="tip">
            提示：僅允許上傳多1個".xlsx"或者".xls"格式文件，單個文件最大10M
          </div>
        </el-upload>
         <el-button type="primary" @click="submitUpload()">上傳</el-button>

 script部分
```vue
                          // 試題導入
beforeFileUpload(file) {
 const isFileSizeLimit = file.size / 1024 / 1024 < 10;
 if (!isFileSizeLimit) {
   this.$message.error("單個圖片大小不能超過 10MB!");
 }
 return isFileSizeLimit;
},
// 文件添加、 上傳、 失敗
fileChange(file, fileList) {
 this.xlsFile = file;
 console.log("1111111", this.xlsFile);
},
// 文件上傳成功處理
fileSuccess(response, file, fileList) {
 // this.openUpload = false;
 // this.isUploading = false;
},
// 預覽文件
preview(file) {
 // this.dialogVisible = true;
},
// 文件超出限制
exceed(files, fileList) {
 this.$message.warning(
   `當前限制選擇 1個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${
     files.length + fileList.length
   } 個文件`
 );
},
// 移除文件
fileRemove(file, fileList) {
 this.xlsFile = null;
},
// 點擊上傳
submitUpload() {
 this.$refs.fileUpload.submit();
},
uploadHttpRequest(param) {
 const formData = new FormData(); //FormData對象，添加參數(shù)只能通過append('key', value)的形式添加
 formData.append("file", this.xlsFile.raw); //添加文件對象
 // this.$refs["form"].validate((valid) => {
   // if (valid) {
   //   if (!this.form.id) {
   //     formData.append("passValue", this.form.passValue);
   //     formData.append("scoreEvery", this.form.scoreEvery);
   //     formData.append("testName", this.form.testName);
   //   } else {
   //     formData.append("id", this.form.id);
   //   }
     excelData(formData)
       .then((res) => {
         if (res.code === 200) {
           this.msgSuccess("導入成功");
           console.log('re====>',res.data)
           // this.open = false;
           this.getList();
         }
       })
       .catch((err) => {
         console.log("失敗", err);
         param.onError(); //上傳失敗的文件會從文件列表中刪除
       });
   // }
 // });
},

把el-upload里的自動上傳auto-upload置為false，然后自定義上傳按鈕，調用

this.$refs.fileUpload.submit();

便會觸發(fā) :

http-request=“uploadHttpRequest”

vue在表單中使用el-upload手動上傳圖片

自動上傳和手動上傳

上傳圖片分兩種，自動上傳和手動上傳，效果區(qū)別：

自動上傳：選擇圖片后立刻調接口上傳圖片
手動上傳：選擇圖片后只顯示圖片，自定義何時上傳，可以定義點擊確定事件里表單驗證成功后上傳圖片
區(qū)別：自動上傳會造成很多臟數(shù)據(jù)，手動上傳等到上傳時才校驗圖片是否合規(guī)

手動上傳

表單中使用el-upload手動上傳圖片，組件選擇的是照片墻

<template>
    <el-form
      ref="cardFormRef"
      :model="cardForm"
      :rules="rules"
      label-width="120px"
      class="demo-cardForm"
      status-icon
    >
    <el-form-item label="輪播圖" prop="photo">
        <el-upload
          ref="uploadRef"
          :class="{ iconVis: fileList.length }"
          :action="url" //上傳接口
          v-model:file-list="fileList"
          :limit="1" //限制上傳一張
          list-type="picture-card"  //照片墻
          :before-upload="beforeUpload"  //上傳前
          :on-success="handleAvatarSuccess"  //上傳成功
          :headers="headers"
          :auto-upload="false"  //手動上傳
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
  </el-form>
</template>

var fileList = ref([]);
var uploadUrl = ref(false); //存圖片成功返回的url
const headers = ref({ Authorization: "Bearer " + getToken() });
var url =import.meta.env.VITE_APP_BASE_API + "接口";
 
var rules = computed(() => ({  //表單校驗規(guī)則
  photo: [
    {
      required: true,
      message: "請上傳圖片",
      trigger: "blur",
    },
  ]
}));
 
var beforeUpload = (file) => {
  console.log("上傳前");
  const isJPG =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    proxy.$modal.msgError("上傳圖片只能是 JPG/PNG 格式!");
  }
  if (!isLt2M) {
    proxy.$modal.msgError("上傳圖片大小不能超過 2MB!");
  }
  isJPG && isLt2M ? (uploadUrl.value = true) : (uploadUrl.value = false);
  return isJPG && isLt2M;
};
 
function handleAvatarSuccess(res, file) {
  console.log("成功了！");
  let { url } = res.data;
  uploadUrl.value = url;
  sumbitForm(); //表單提交接口，傳uploadUrl
}
 
var cardFormRef=ref(null);
var uploadRef=ref(null);
var sumbit = () => {  //點擊確定按鈕，進行表單校驗，校驗成功上傳圖片
  cardFormRef.value.validate((val) => {
    if (val) {
      console.log("上傳圖片");
     uploadRef.value.submit();
    }
  });
};

點擊確定sumbit,表單校驗成功 => beforeUpload檢查圖片符合規(guī)格 => handleAvatarSuccess圖片上傳成功 =>sumbitForm提交表單，包含圖片上傳成功返回的url