vue3elementPlus组件库upload使用

<el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="#"
    multiple
    before-upload="beforeupload"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>

before-upload="beforeupload"   上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。

在这个钩子里面我们可以对上传文件的大小进行限制。 超出则停止上传。

const beforeUpload = (file) => {
  const size = Number(file.size / 1024 / 1024)
  if (size > 20) {
    ElMessage.warning('文件超出20MB')
    return false
  }
}

limit="1":限制上传文件个数。允许上传文件的最大个数。

multiple：是否支持多选文件。默认false

 show-file-list是否显示已上传文件列表默认true

on-exceed="handleExceed"当超出限制时执行的方法

file-list / v-model:file-list  默认上传文件 UploadUserFile[]

const fileList = ref([]);

const handleExceed = (newFiles, existingFiles) => {
  // 新选择的文件：newFiles[0]
  // 已存在的文件：existingFiles[0]
  
  // 自动替换策略：用新文件替换旧文件
  fileList.value = [{
    name: newFiles[0].name,
    raw: newFiles[0]  // 保留原始File对象
  }];
  
  ElMessage.warning(`已自动替换前一个文件`);
};

模板下载

const uploadTmpl = async () => {
  const response = await axios({
        url: "http://xxx/1730517650149.xlsx",//服务器返回的模板下载地址路径
        method: "GET",//方法
        responseType: "blob", // 必须指定为blob类型才能下载
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "下载模板名字");
    document.body.appendChild(link);
    link.click();
};

try {
    const res = await （发起axios请求 （并传值过去后端唯一标识，下载模板名称，下载模板配置项{ responseType: 'blob' }））)
    if (res.msg) {
      ElMessage.error(res.msg)
    } else {
      exportBlob(res.data, res.fileName)
    }
  } catch (error) {
    ElMessage.error(error)
  } 

自定义上传请求

//自定义上传请求
const customHttpRequest = async (options:any) => {
  const formData = new FormData();
  formData.append("file", options.file);
//上传文件一定要时formData对象。
  const token = Cookies.get("Admin-Token");
  try {
    const response = await axios.post(options.action, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
        "Authorization": `${token}`  // 传入token
      },
    });
    options.onSuccess(response.data, options.file);
  } catch (error) {
    options.onError(error);
  }
};

 打印出来http-request方法的参数。