1、Vue3中如何实现点击按钮实现文件上传导入的功能呢？请看下面代码实例：

html code:

<el-button text type="primary" @click="importBillExcel(row)">导入账单</el-button>

javascript code:

// 导入账单Excel表等文件
const importFile = (row) => {
   let input = document.createElement('input')
   input.type = 'file'
   input.accept = '.xls,.xlsx,.pdf, .png, .zip, .jpg'; // 限制选择的文件类型为'.xls,.xlsx, .pdf, .png, .zip, .jpg
   input.style.display = 'none'
   document.body.appendChild(input)
   input.click();
   input.onchange = (e) => {
       const file = e.target.files[0] // 获取文件对象
       let paramsFile = new FormData() // 转为表单格式
       paramsFile.append('file',file) // 添加属性和值
       paramsFile.append('type',row.type) // 添加属性和值
       importCustomerBill(paramsFile).then(res=>{
           document.body.removeChild(input)
       })
   }
}

 

2、Vue3中如何点击按钮下载网络文件？这个功能很简单，一个函数就能搞定。请看代码实例：

const download = (row: any) => {
   // 获取文件名及扩展名
   const fileName = row.name
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = row.url

   // 设置 download 属性为文件名（包含扩展名）
   link.setAttribute('download', fileName)

   // 将链接添加到页面并触发点击事件
   document.body.appendChild(link)
   link.click()

   // 点击完成后，移除链接
   document.body.removeChild(link)
}