zoukankan      html  css  js  c++  java
  • 上传文件及文件夹

    实现效果:

     想要实现可以上传文件和文件夹这个操作,

    实现代码:

    1.html:

    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :http-request="modeUpload">
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
    
    <el-button size="small" type="primary" @click="chooseFiles">选择文件夹</el-button>
    <div v-show="false">
      <input type="file" id="file" ref="file" webkitdirectory directory multiple="multiple" v-on:change="handleFileUpload($event)" />
    </div>
    

    2.data:

    modeList: '',
    

    3.methods:

    //选择文件
    modeUpload: function(item) {
      this.modeList = item.file;
    },
    
    //触发文件夹选择
    chooseFiles(e){
      document.getElementById('file').click();
    },
    
    //选择文件夹
    handleFileUpload(event){
      this.modeList = document.getElementById("file").files;
    },
    

    4.上传:

    let formData = new FormData();
    
    // 把文件信息添加进如对象
    formData.append('file', this.modeList);
    

    注意:

    1.选择了文件夹后,默认选择了该文件夹下的所有文件。

  • 相关阅读:
    java 反射
    java 面试题
    Java构造和解析Json数据的两种方法详解一
    JAVA UUID 生成
    tomcat 插件
    webstorm 激活码
    maven环境搭建
    svn 安装网站
    2015.6.30 反弹的教训(想做T)
    2015.6.15 惨跌开始的反思
  • 原文地址:https://www.cnblogs.com/5201314m/p/12598809.html
Copyright © 2011-2022 走看看