vue项目中通过url数组一次下载多个文件

后台拿到需要下载的url数组,最开始想到的是在页面创建a标签,通过a标签的点击来实现下载

downloadFile(content, filename) {
      // 创建隐藏的可下载链接
      let eleLink = document.createElement('a')
      eleLink.setAttribute('class', 'upload-file')
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', false, false)
      eleLink.download = filename
      eleLink.style.display = 'none'
      // 字符内容转变成blob地址
      // var blob = new Blob([content])
      // eleLink.href = URL.createObjectURL(blob)
      eleLink.href = content
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.dispatchEvent(evt)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    }

后面发现这个又一个bug,通过循环进来的这个方法,只能下载数组最后一条

后面换了一个方法,使用iframe去下载,就成了?

let _this = this
      for (let i = 0; i < _this.exportCrfData.length; i++) {
        const iframe = document.createElement('iframe')
        iframe.style.display = 'none' // 防止影响页面
        iframe.style.height = 0 // 防止影响页面
        iframe.src = _this.exportCrfData[i].url
        document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求
        // 之后删除
        setTimeout(() => {
          iframe.remove()
        }, 1000)
      }

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 使用Vue.js 3构建多文件上传的代码可以使用Vue.js的v-model绑定指令来处理,例如:<input type="file" v-model="files" multiple> data() { return { files: [] } }, methods: { onFileChange(e) { this.files = e.target.files } } ### 回答2: Vue3实现多个文件上传的代码可以分为前端和后端部分。下面是一个简单的示例: 前端部分(使用Vue3的组件): ```HTML <template> <div> <input type="file" multiple @change="handleUpload"> <button @click="uploadFiles">上传文件</button> <ul> <li v-for="file in files" :key="file.name">{{ file.name }}</li> </ul> </div> </template> <script> import { ref } from 'vue'; export default { name: 'FileUpload', setup() { const files = ref([]); const handleUpload = (e) => { files.value = Array.from(e.target.files); }; const uploadFiles = () => { const formData = new FormData(); files.value.forEach((file) => { formData.append('files[]', file); }); // 调用后端接口上传文件 // axios.post('/upload', formData); // 或者使用fetch API // fetch('/upload', { // method: 'POST', // body: formData, // }); // 清空文件列表 files.value = []; }; return { files, handleUpload, uploadFiles, }; }, }; </script> ``` 后端部分(使用Node.js和Express框架): ```JavaScript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('files[]'), (req, res) => { // 处理上传的文件,可以通过req.files访问文件信息 // req.files是一个数组,每个元素都包含文件的相关信息,如文件名、文件路径等 console.log(req.files); res.send('文件上传成功'); }); app.listen(3000, () => { console.log('服务器已启动'); }); ``` 以上代码展示了一个基于Vue3的多个文件上传示例。前端使用`<input type="file" multiple>`组件来让用户选择多个文件,通过监听`@change`事件获取选择的文件列表,然后将文件添加到`FormData`对象点击"上传文件"按钮后,通过Ajax或fetch API将文件上传到后端接口。 后端使用`multer`间件来处理上传的文件,其`upload.array('files[]')`表示允许多个文件上传,文件字段名称为`files[]`,上传后的文件将保存在`uploads/`目录。在路由处理函数,可以通过`req.files`来访问上传的文件信息,这是一个数组,每个元素包含一个文件的相关信息。 为了使代码能够运行,还需要安装相关的依赖,可以通过以下命令安装: ``` npm install vue@next axios multer express multer ``` 通过以上代码,您可以实现Vue3多个文件上传功能。 ### 回答3: 在Vue 3实现多个文件上传可以使用Vue插件`vue-upload-component`。以下是一个简单的示例: 1. 首先,安装`vue-upload-component`插件。 ```bash npm install vue-upload-component ``` 2. 在Vue组件导入并注册插件。 ```javascript import VueUploadComponent from 'vue-upload-component'; export default { components: { VueUploadComponent }, methods: { handleUpload(file) { console.log(file); // 在这里处理上传的文件 } } } ``` 3. 在模板使用`vue-upload-component`。 ```vue <template> <div> <vue-upload-component :url="'your_upload_url'" :headers="{'Authorization': 'Bearer ' + token}" @input-file="handleUpload" multiple :backend-upload="true" :auto-upload="false" accept="image/*"> <button>选择文件</button> </vue-upload-component> </div> </template> ``` 在上面的示例,`vue-upload-component`组件会渲染一个选择文件按钮,当用户选择文件后,`handleUpload`方法会被调用,并将文件对象作为参数传递,你可以在该方法处理上传的文件。同时,可以通过设置`multiple`属性来支持多文件上传。 需要注意的是,你还需要根据你的具体需求配置上传的URL、请求头、是否自动上传等选项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值