vue上传文件

上传按钮

<button @click="clickUploadSpider">
              批量上传
              <!--     @click.stop  防止冒泡     -->
              <input type="file" id="uploadSpider"
                     class="upload-input-none" @click.stop
                     @change="uploadSpider($event)"
                     multiple>
</button>

js中方法

    //点击上传按钮时触发的事件,打开文件选择框
    clickUploadSpider () {
      let file = document.getElementById('uploadSpider')
      // 让值发生变化，input的@change事件才会响应
      file.value = ''
      file.click()
    },
    // 选完文件后触发的回调事件
    async uploadSpider (e) {
      // 要上传的url弟子
      let url = "*********"
      this.uploadFile(url, e)
    },
    uploadFile (url, e) {
      let files = e.target.files

      if (files.length == 0) {
        return
      }
      // 参考：https://www.jianshu.com/p/9c708a47d8a5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
      //设置参数
      let formData = new FormData()
      Array.from(files).forEach(file => {
        formData.append('files', file)
      })

      //设置请求头
      let config = {
        //添加请求头
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }

      //发送请求
      await post(formData, url, config).then(res => {
        if (res.data.success) {
          this.$hMessage.success('批量导入成功')
        } else {
          console.log("失败")
        }
      }).catch(err => {
        console.log(err.message)
      })
    },