文件上传和下载

一、文件上传

1、选择本地文件：

初始化配置对象

const _options = {
  accept: '*', //允许所有类型的文件
  multiple: false //默认单选
}

合并用户传入的配置

 if (option) {
      _options.accept = option.accept
      _options.multiple = option.multiple
    }

创建文件输入元素

const el = document.createElement('input');//使用 document.createElement('input') 创建一个隐藏的文件输入元素
el.type = 'file';//设置其 type 属性为 'file'，表示这是一个文件选择输入框
el.accept = _options.accept;//根据 _options.accept 设置文件类型过滤器
el.multiple = _options.multiple;//根据 _options.multiple 设置是否允许多选

监听文件选择事件

el.addEventListener('change', () => {
  if (_options.multiple) {
    resolve(el.files);
  } else {
    resolve(el.files[0]);
  }
});

触发文件选择对话框：调用 el.click() 手动触发文件输入元素的点击事件，弹出文件选择对话框

2、创建一个FormData对象，并将选择的文件和其他必要信息（如，文件、文件类型和合同类型）添加到该对象中

   const formData = new FormData()
   formData.append('file', file)
   formData.append('fileType', fileType)
   formData.append('contractType', contractType.value )

3、调用上传文件的接口，刷新列表

二、文件下载

1、构建文件路径

   const filePath = `${window.env.BASE_URL}path/${path}`

使用window.env.BASE_URL和传入的path参数构建完整的文件下载路径

2、创建下载链接

   const link = document.createElement('a')
   link.href = filePath
   link.download = path.split('/').at(-1)

创建一个<a>元素
设置href属性为文件路径，浏览器知道要下载的文件地址
设置download属性为文件名（通过path.split('/').at(-1)获取文件名的最后一部分），浏览器在下载时使用该文件名

3、触发下载

   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
   

将创建的<a>元素添加到文档中
触发<a>元素的点击事件，开始文件下载
下载完成后，从文档中移除<a>元素

三、删除文件