• 原生js--封装点击上传附件


    在日常开发中,经常会有点击按钮上传附件的功能需求。
    在我们平时的开发中,已经习惯把当前项目所用到的UI框架中的上传组件拿来直接使用
    例如:antd的上传组件在这里插入图片描述

    以及element的上传组件,其实在用法上都大同小异。
    在这里插入图片描述
    这种都是直接引用组件就可以直接实现的。但作为开发我们还是要具备在不使用UI组件的情况下也能实现对应功能的能力,所以特将原生js实现上传附件的代码贴出,希望能对大家有帮助。

    <template>
      <a-col span="20">
        
        <p class="upload" @click="upload">点击上传附件(支持视频、音频、图片、文档、压缩包)100M 以内p>
    
        <div class="mask" v-if="uploading">
          <a-spin tip="上传中,请稍候..." >
            <a-icon slot="indicator" type="loading" style="font-size: 30px; color: #fff;" spin />
          a-spin>
        div>
      a-col>
    template>
    
    <script>
    export default {
      name: 'AttachedUpload',
      data() {
        return {
          uploading: false, // 上传过程中 loading 显隐控制
          uploadFileName: '', // 上传过程中显示的文件名
          loadIds:[],//已上传文件id
        }
      },
      methods: {
        // 上传附件
        async upload() {
          const inputEl = document.createElement('input')
          const typeList = ['docx', 'doc', 'xlsx', 'xls', 'txt', 'png', 'jpg', 'gif', 'pdf', 'jpeg','mp4','png']
    
          inputEl.type = 'file'
          inputEl.onchange = async () => {
            const [file] = inputEl.files // 单文件上传时获取第一个选中的文件
            this.uploadFileName = file.name // 获取上传文件的名称
            console.log('this.uploadFileName',file)
            const isLt10M = file.size / 1024 / 1024 < 10 //这里做文件大小限制
            if (!isLt10M) {
              this.$message.warning('上传文件大小不能超过100MB')
              return
            }
            if (this.uploadFileName.length > 105) {
              this.$message.warning('上传失败:文件名过长')
              return
            }
    
            if (!typeList.includes(this.uploadFileName.split('.').pop())) {
              this.$message.error('上传失败,不支持上传该格式文件')
              return
            }
            // 构造 FormData 对象, 并 append 一个表单字段与值
            const formData = new FormData()
            formData.append('uploadFile', file)
    
            this.uploading = true // 显示上传中 loading
            const res = await this.$api.common.attachUploadNew(formData) // 上传
           
            if (res.data) {
              this.loadIds = this.loadIds.concat([res.data])
              // 可在此处根据业务场景自己做一些操作
              this.$message.success('上传成功!')
            } else {
              this.$message.error('上传失败,请重试')
            }
            this.uploading = false
          }
          inputEl.click() // 打开文件管理器
        },
      },
    }
    script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    此处为了节约篇幅,省去了附件预览、下载以及删除等附属功能,可根据当前业务场景的需要自行添加,特以此记录!!

  • 相关阅读:
    贝壳村到全球市场:跨境电商助力农村经济
    球形罩铆接机械臂设计(lunwen+开题报告+指导记录+设计图纸+PLC控制程序)
    计算机体系结构和操作系统
    C++ 学习(19)STL - list容器、set容器
    成熟企业级开源监控解决方案Zabbix6.2关键功能实战-上
    实战派 | Java项目中玩转Redis6.0客户端缓存!
    线程池的4种创建方式
    什么? CSS 将支持 if() 函数了?
    笔试强训Day11
    学习笔记- PHP回调函数
  • 原文地址:https://blog.csdn.net/weixin_44691220/article/details/127447693