快捷導(dǎo)航

Vue在表單中使用el-upload手動(dòng)上傳圖片方式

更新時(shí)間：2026年04月14日 09:08:50 作者：知更鳥666

文章描述了兩種上傳圖片的方式：自動(dòng)上傳和手動(dòng)上傳,并分析了兩種方式的優(yōu)缺點(diǎn); 幙提出了使用手動(dòng)上傳的方式,并幨通過表單使用了`℘upload`組件; 幻重點(diǎn)介紹了手動(dòng)上傳時(shí)表單驗(yàn)證、圖片規(guī)格檢查、上傳成功處理及提交表單的過程

一、自動(dòng)上傳和手動(dòng)上傳

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

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

二、手動(dòng)上傳

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

<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"  //手動(dòng)上傳
        >
          <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(() => ({  //表單校驗(yàn)規(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 = () => {  //點(diǎn)擊確定按鈕，進(jìn)行表單校驗(yàn)，校驗(yàn)成功上傳圖片
  cardFormRef.value.validate((val) => {
    if (val) {
      console.log("上傳圖片");
     uploadRef.value.submit();
    }
  });
};

點(diǎn)擊確定sumbit，

表單校驗(yàn)成功 => beforeUpload檢查圖片符合規(guī)格 => handleAvatarSuccess圖片上傳成功 =>sumbitForm提交表單，包含圖片上傳成功返回的url