文件下载时下载的原文件名

src/components/UploadFile/src/UploadFile.vue

@@ -36,11 +36,12 @@
         <div class="flex items-center">
           <span>{{ row.file.name }}</span>
           <div class="ml-10px">
+<!--            :href="row.file.url"-->
+<!--            :download = "row.file.name"-->
             <el-link
-              :href="row.file.url"
               :underline="false"
-              download
               target="_blank"
+              @click="downloadFile(row.file)"
               type="primary"
             >
               下载
@@ -72,7 +73,7 @@ const props = defineProps({
   fileSize: propTypes.number.def(5), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传
-  drag: propTypes.bool.def(false), // 拖拽上传
+  drag: propTypes.bool.def(true), // 拖拽上传
   isShowTip: propTypes.bool.def(true), // 是否显示提示
   disabled: propTypes.bool.def(false) // 是否禁用上传组件 ==> 非必传（默认为 false）
 })
@@ -123,6 +124,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
   // 删除自身
   const index = fileList.value.findIndex((item) => item.response?.data === res.data)
   fileList.value.splice(index, 1)
+  console.log("res",res)
   /**
    *   拼接更加明显的特殊字符串来便于切割
    * */
@@ -157,6 +159,26 @@ const handleRemove = (file: UploadFile) => {
     emitUpdateModelValue2()
   }
 }
+const downloadFile = async (file)=> {
+  //使用 fetch API 请求文件并返回 Blob 数据
+  const response = await fetch(file.url);
+  //获取 response blob 属性
+  const blob = await response.blob();
+  //创建一个 <a> 元素
+  const link = document.createElement('a')
+  //创建一个临时的对象 URL，指向该 Blob。
+  link.href = URL.createObjectURL(blob);
+  //指定下载时的文件名，此时浏览器将强制使用这个名称。
+  link.download = file.name
+  //添加下载link
+  document.body.appendChild(link);
+  //手动触发点击事件，开始下载文件。
+  link.click();
+  //移除下载link
+  document.body.removeChild(link);
+  //下载完成后，释放创建的对象 URL，避免内存泄漏
+  URL.revokeObjectURL(link.href);
+}
 const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
   console.log(uploadFile)
 }