zoukankan      html  css  js  c++  java
  • 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)
          })
        },
    
  • 相关阅读:
    矩阵快速幂 ——(递推表达式)
    简易五子棋 V1.1.0
    自己写的五子棋
    公共子序列
    阮一峰 KMP BM算法
    「SDOI2013」森林
    「SPOJ1487」Query on a tree III
    「luogu3810」陌上花开
    「CQOI2011」动态逆序对
    「APIO2012」派遣
  • 原文地址:https://www.cnblogs.com/yloved/p/14784973.html
Copyright © 2011-2022 走看看