vue-原生js实现文件上传

1.按钮通过ref触发input的上传功能

<tk-button @click="handleUpLoad">点击上传</tk-button>（自定义标签）
<input ref="inputUpLoad" style="display: none" type="file" accept="*" @change="handleFile"/>

 handleUpLoad指向input

handleUpLoad () {
      if (this.radioDate.length === 0) {
        this.$alert('请先选择数据')
        return false
      }
      this.$refs.inputUpLoad.click()
    }

handleFile定义上传过程

handleFile (e) {
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      if (!file) {
        return
      }
      let formData = new FormData()
      formData.append('file', file)
      // 图片上传限制
      let fileSize = file.size
      if (fileSize > 52428800) {
        this.$alert('大小不得超过50M')
        return
      }
      this.$axios({
        url: '/upload/file',
        method: 'post',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        data: formData
      }).then((res) => {
        // console.log(res.data)
        if (res.data.tradeMap.resultCode === '0000') {
          this.fileNames = res.data.tradeMap.fileNames
          // console.log('文件上传返回的filenames是：' + this.fileNames)
          this.sendFileNames()
        } else {
          let message = res.data.tradeMap.message
          this.$alert(message)
        }
      }).catch((error) => {
        console.log(error)
      })
    }

2.实现效果

 

一些校验及上传都能实现

3.缺陷

 1）从第二次上传开始，上传框中会遗留上次上传的文件名

2）上传失败后，需要点开上传框，点击取消，才能再次使用上传功能