vue el-upload手动上传实现过程_Vue.js

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对象，添加参数只能通过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();

便会触发 :

http-request=“uploadhttprequest”

vue在表单中使用el-upload手动上传图片

自动上传和手动上传

上传图片分两种，自动上传和手动上传，效果区别：

自动上传：选择图片后立刻调接口上传图片
手动上传：选择图片后只显示图片，自定义何时上传，可以定义点击确定事件里表单验证成功后上传图片
区别：自动上传会造成很多脏数据，手动上传等到上传时才校验图片是否合规

手动上传

表单中使用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(() => ({  //表单校验规则
  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检查图片符合规格 => handleavatarsuccess图片上传成功 =>sumbitform提交表单，包含图片上传成功返回的url