vue选择上传文件

importFile (accept=[], size=0) {
return new Promise((resolve, reject) => {
let ipt = document.createElement('input')
ipt.type="file"
ipt.webkitdirectory = true
ipt.click()
let file = null
ipt.addEventListener('change', (e) => {
file = e.target.files[0]
let names = file.name.split('.')
let suffix = names[names.length-1]
console.log(accept)
if(accept.length > 0 && !accept.includes(suffix)){
reject()
return message.error('请上传Excel格式文件')
}
if(size && file.size > size) {
reject()
return message.error('文件大小超过限制') 
}
console.log('file',file);
resolve(file)
})
})
},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue选择音频文件上传的方法有多种,以下是一种常见的实现方式: 1. 在Vue组件创建一个input元素,用于选择音频文件: ```html <template> <div> <input type="file" id="audio-upload" @change="handleFileUpload"> </div> </template> ``` 2. 在Vue组件的methods编写处理文件上传的方法: ```javascript methods: { handleFileUpload(event) { const file = event.target.files[0]; // 获取用户选择的文件 const allowedTypes = ['audio/mpeg', 'audio/wav', 'audio/mp3']; // 允许上传的音频文件类型 // 检查文件类型 if (allowedTypes.includes(file.type)) { // 创建一个FormData对象,用于将文件发送到服务器 const formData = new FormData(); formData.append('audio', file); // 向服务器发送文件 // 可以使用Vue框架提供的Axios插件或fetch API // 以下是使用Axios的示例 axios.post('/upload-audio', formData) .then(response => { // 处理上传结果 console.log(response.data); }) .catch(error => { // 处理上传错误 console.error(error); }); } else { // 文件类型不被允许 console.error('Invalid audio file type'); } } } ``` 3. 在服务器端(如Node.js)编写对应的路由处理函数,用于接收并保存上传的音频文件: ```javascript app.post('/upload-audio', (req, res) => { if (!req.files || Object.keys(req.files).length === 0) { return res.status(400).json({ message: 'No files were uploaded' }); } const audio = req.files.audio; // 在这里可以处理上传的音频文件,例如保存到服务器的文件系统 res.json({ message: 'File uploaded successfully' }); }); ``` 请注意,以上代码仅为示例,具体实现可能会因应用情况而异。同时,需要确保安装了相关依赖(如axios和express-fileupload)。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值