vue webkitdirectory属性上传文件夹

9 篇文章 1 订阅

element 上传组件不支持文件夹上传,。。。使用input的webkitdirectory属性可上传文件夹
在这里插入图片描述



<input ref="file"  class="fileUploaderClass" type='file' name="file" webkitdirectory @change.stop="changesData"/>


changesData () {
console.log(this.$refs.file.files)
 this.fileList = this.$refs.file.files  // 获取filelist
 },
// 上传
 uploadFile () {
      let formData = new window.FormData()
      for (let i = 0; i < this.fileList.length; i++) {  // 每个file append到formdata里
        formData.append('file', this.fileList[i])
      }
      let url = Vue.prototype.API_URL + '/imageCompare'
      axios({
        method: 'post',
        url: url,
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(function (res) {
      })
    },

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将vue中的文件上传到文件,您需要使用后端技术。具体来说,您需要编写一个后端API来处理上传文件并将其保存到指定的文件中。 在前端,您可以使用Vue.js的Axios库来发送文件到服务器。以下是一个示例: ```javascript <template> <div> <input type="file" @change="onFileChange"> <button @click="uploadFile">上传文件</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { file: null, }; }, methods: { onFileChange(event) { this.file = event.target.files[0]; }, async uploadFile() { const formData = new FormData(); formData.append('file', this.file); try { const response = await axios.post('/api/upload', formData); console.log(response.data); } catch (error) { console.error(error); } }, }, }; </script> ``` 在后端,您需要使用Node.js和Express框架来编写API。以下是一个示例: ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '/path/to/your/folder'); }, filename: function (req, file, cb) { cb(null, file.originalname); }, }); const upload = multer({ storage }); app.post('/api/upload', upload.single('file'), (req, res) => { res.send('文件上传成功'); }); app.listen(3000, () => { console.log('服务器已启动'); }); ``` 在这个示例中,我们使用了multer库来处理文件上传。我们定义了一个存储对象,它将文件保存到指定的文件中。我们还定义了一个upload对象,它使用存储对象来处理文件上传。最后,我们定义了一个API路由,它使用upload对象处理文件上传,并返回一个成功消息。 请注意,在实际应用中,您需要对上传的文件进行验证和安全措施,以确保您的应用程序不会受到攻击。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值