美文网首页
vue原生文件上传,可以多文件上传

vue原生文件上传,可以多文件上传

作者: 一人创客 | 来源:发表于2020-07-09 16:46 被阅读0次

    1.单文件上传

    <template>
      <div>
        <label for="fileInput">
          <i aria-hidden="true" class="cursor">上传文件</i>
        </label>
        <input
          v-show="false"
          type="file"
          id="fileInput"
          @change="handleFileChange"
          name="file"
          ref="file"
        />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        handleFileChange(e) {
          let _this = this;
          let file = e.target.files;
          console.log(file,"单文件流文件流");
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .cursor {
      cursor: pointer;
      color: #409eff;
      font-size: 16px;
    }
    </style>
    

    2.多文件上传

    在input上加属性multiple="multiple"即可实现多文件上传,也可以设置文件上传类型是在input上加属性accept=".xls, .xlsx"

    <template>
      <div>
        <label for="fileInput">
          <i aria-hidden="true" class="cursor">上传文件</i>
        </label>
        <input
          v-show="false"
          type="file"
          id="fileInput"
          @change="handleFileChange"
          accept=".xls, .xlsx"
          name="file"
          ref="file"
          multiple="multiple"
        />
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        handleFileChange(e) {
          let _this = this;
          let file = e.target.files;
         console.log(file,"多文件文件流文件流");
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .cursor {
      cursor: pointer;
      color: #409eff;
      font-size: 16px;
    }
    </style>
    
    

    相关文章

      网友评论

          本文标题:vue原生文件上传,可以多文件上传

          本文链接:https://www.haomeiwen.com/subject/luescktx.html