限制el-upload组件的上传文件大小

限制el-upload组件的上传文件大小

<el-upload
  v-model:file-list="uploadAttachments"
  :limit="1"
  accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.ppt"
  action="#"
  :on-exceed="handleExceed"
  :http-request="httpUpload"
  :before-upload="handleBeforeUpload"
>
  <el-button type="primary">上传附件</el-button>
  <template #tip>
    <div class="el-upload__tip">
      pdf、doc、docx、xls、xlsx、csv、txt、ppt类型的文件可以上传大小不能超过10MB.
    </div>
  </template>
</el-upload>

Vue实例中定义handleBeforeUpload方法来进行文件大小的验证。你可以使用file.size属性来获取文件的大小，并与你期望的大小进行比较。如果文件大小超过了你的限制，你可以返回false来阻止文件上传，或者返回一个带有错误信息的字符串，以便在界面上显示错误信息。

const handleBeforeUpload = (file) => {
  const maxSize = 10 * 1024 * 1024; // 10MB，根据你的需求设置最大文件大小
  if (file.size > maxSize) {
    ElMessage({
      message: `文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
      type: 'warning'
    });
    return false;
  }
};

第一次上传成功后第二次以及后面的上传时触发
const handleExceed = (files) => {
  const maxSize = 10 * 1024 * 1024; // 10MB，根据你的需求设置最大文件大小
  if (files[0].size > maxSize) {
    uploadAttachments.value = [];
    ElMessage({
      message: `文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
      type: 'warning'
    });
    return false;
  } else {
    let overwriteParameters = files[0];
    let formData = new FormData();
    formData.append('file', overwriteParameters);
    //上传方法
    uploadImg(formData)
      .then((res) => {
        // console.log(res);
        uploadAttachments.value = [];
        uploadAttachments.value.push({ name: overwriteParameters.name, url: res.data });
      })
      .catch((err) => {
        console.error(err);
      });
  }
};

// 上传附件
const httpUpload = (data) => {
  let formData = new FormData();
  formData.append('file', data.file);
  uploadImg(formData)
    .then((res) => {
      // console.log(res);
      uploadAttachments.value = [];
      uploadAttachments.value.push({ name: data.file.name, url: res.data });
    })
    .catch((err) => {
      console.error(err);
    });
};