欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue小插件 - 单文件上传

程序员文章站 2022-03-13 19:50:32
背景介绍在项目中有很多地方需要用到文件上传,但是很多时候都是单个的文件,用 el-upload 写起单个文件上传来太过重度了设想如果我只用写一个 button 就能模拟文件的上传,体验会很顺滑// 业务模块

背景介绍

在项目中有很多地方需要用到文件上传,但是很多时候都是单个的文件,用 el-upload 写起单个文件上传来太过重度了

设想

如果我只用写一个 button 就能模拟文件的上传,体验会很顺滑

// 业务模块
<el-button @click="() => {
	_importFile(接口名称, res => {
        if (res.code === '1') {
          $message.success('上传成功')
          
          // 重新获取数据
          getData()
          
        } else {
          $message.error('上传失败')
        }
      })
}"> 上传文件 </el-button>

在方法中修改 type 设置FormData中的名字,accept属性设置允许什么上传…
大家可以自行拓展,让方法更符合自己的习惯需求

// main.js

// 单个文件下载
Vue.prototype._importFile = (callback, then) => {
  const params = new FormData()
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xls,.xlsx'

  input.addEventListener('change', function(e) {
    const file = e.target.files[0]
    if (file) {
      params.append('file', file)
      callback(params)
        .then(res => {
          then(res)
        })
    }
  })
  input.click()
}

本文地址:https://blog.csdn.net/weixin_47433941/article/details/112586822

相关标签: vue vue.js