vue实现文件上传，下载到本地（简单的方式）

一、文件的快速下载

二、文件的上传 formdata

一、文件的快速下载

我这里是调用的Ant-table表格数据

function downloadFiles (record: any) {  /* 下载媒体文件  图片 */
  const link = document.createElement('a')   // 创建一个链接元素
  link.href = record.photo   //重点（如测试发现下载文件不存在/找不到，检查路径）
  link.download = record.file_name   // 设置下载文件文件名
  link.style.display = 'none' 
  document.body.appendChild(link)  // 将链接元素添加到页面中 
  link.click()   // 触发链接的点击事件以触发图像下载 
  document.body.removeChild(link) // 在完成下载后，从页面中移除链接元素
}

 

二、文件的上传 formdata        

function beforeUpload (e: any) {
  console.log(e, '上传')
  const formdataname = e.name  //文件的名字
  const formdatatype = e.type  //文件的类型
  const recordedBlobs = [{     //需要传递到数据
    size: e.size,    //文件的大小
    type: e.type     //文件的类型
  }]
  const fileobj = new File([recordedBlobs], formdataname, { type: formdatatype })
  const formdata = new FormData()
  formdata.append('file', fileobj)
  axios.post('此处写接口地址', formdata, {
    headers: { 'Content-Type': 'none' },
  }) // 请求头要为表单
    .then((response) => {
      console.log(response.data)
    })
    .catch(function (error) {
      console.log(error)
    })
  // loading.value = true
  // return true
}