精华内容
下载资源
问答
  • js实现excel文件上传
    2020-05-21 14:40:25

    js实现excel文件上传

    <input  type="file" name="multipartFile" id="upload_file"/>
    
    let fileObj = document.getElementById("upload_file").files[0];
                    let formData = new FormData();
                    formData.append('file', fileObj);
                    $.ajax({
                        type:'POST',
                        url:siteUrl+ '/dataControllerPower/import',
                        dataType:'json', //服务器响应的数据类型
                        contentType: false, // 注意这里应设为false
                        processData: false,
                        cache: false,
                        data:formData,//发送到服务器的数据
                        success: function(res){
                           
                        },
                        error:function(result){
                            console.error(result)
                        },
                    });
    
    更多相关内容
  • java实现excel文件上传

    2017-09-27 14:44:16
    excel文件上传(代码)! excel文件上传(代码)! excel文件上传(代码)! excel文件上传(代码)! excel文件上传(代码)! excel文件上传(代码)!
  • NULL 博文链接:https://451640893.iteye.com/blog/2400740
  • Excel文件上传,获取Excel文件并解析
  • 运用apache的fileupload库实现文件上传,运用jxl分析导入的excel数据。 只需在现有页面上添加一个“导入”按钮就可实现excel导入数据库的功能,点击“导入”按钮,选择要上传的文件后会立即开始上传。 采用iframe的...
  • 本篇文章主要介绍了基于Spring Mvc实现的Excel文件上传下载示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现Excel上传和下载 存在两种格式的上传和下载,分别对应POI和JXL 可以实现根据Excel模板导出,自定义Excel样式导入 形成自定义的Excel报表等功能。项目为Maven项目,JDK采用1.8
  • excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type=file d=file_input @change=importf(this) accept=.csv, application/vnd....
  • 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
  • 主要介绍了PHP上传Excel文件导入数据到MySQL数据库示例,可以将Excel的数据写入到MySQL数据库中,感兴趣的同学可以了解一下。
  • vue Excel文件上传

    2021-12-02 10:58:55
    使用element组件el-upload <el-upload ref="upload"action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload"> ...el-button type="primary" style="width: 150...上传文件</el

    使用element组件el-upload

      <el-upload
             ref="upload"action="doUpload"
             :limit="1"
             :file-list="fileList"
             :before-upload="beforeUpload">
    <el-button type="primary" style="width: 150px" @click="uploadFile">上传文件</el-button>
            <div slot="tip" class="el-upload__tip"></div>
      </el-upload>

    文件判断

    
          beforeUpload(file){
            console.log(file,'文件');
            this.files = file;
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            const isLt2M = file.size / 1024 / 1024 < 20
            if (!extension && !extension2) {
              this.$message.warning('上传模板只能是 xls、xlsx格式!')
              return
            }
            if (!isLt2M) {
              this.$message.warning('上传模板大小不能超过 20MB!')
              return
            }
            this.fileName = file.name;
            return false // 返回false不会自动上传
          },

    上传到后端

     submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
    
                console.log('上传'+this.files.name)
                if(this.fileName == ""){
                  this.$message.warning('请选择要上传的文件!')
                  return false
                }
                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名
                let requestConfig = {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  },
                }
    
    
                impExcel(fileFormData, requestConfig).then((res) => {
                  console.log("上传excel文件")
                })
                //关闭弹窗
                this.dialogVisible = false;
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },

    引入js方达

    export function impExcel(data) {
      return request({
        url: '/api/upExcel',
        method: 'post',
        data: data
      })
    }

    后端

     @PostMapping(value = "/upExcel")
        public void readExcel(@RequestParam(value="file", required = false)  MultipartFile file){
            long t1 = System.currentTimeMillis();
            List<ArcBasicExcel> list = ExcelUtils.readExcel("", ArcBasicExcel.class, file);
            long t2 = System.currentTimeMillis();
            System.out.println(String.format("read over! cost:%sms", (t2 - t1)));
        }

    效果

    欢迎关注我的公众号:

                    

     

    展开全文
  • 数据库在webcontent下的SQL文件夹中,excel模板在excelModel文件夹中,如果运行后不能正常出现页面,可以将压缩包内的jQuery-easyUI压缩包解压后将WebContent下的同名jQuery-easyUI文件替换。具体使用方法查看使用...
  • 主要给大家介绍了关于利用django如何解析用户上传excel文件的相关资料,这是最近在工作中遇到的一个问题,觉着有必要分享出给大家,需要的朋友可以参考借鉴,下面来一起看看详细的介绍吧。
  • excel文件上传源码

    2018-09-21 10:34:33
    支持所有版本的excel导入共通行的反射实现有需要的朋友可以下载下来参考,需要第三方jar包的可以私信我
  • 主要为大家详细介绍了SpringMVC下实现Excel文件上传下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本资源对应我的一片文章《基于Java语言SpringMVC框架的Excel上传解析以及下载教程》提供的jar依据,其中内容仅供参考,建议阅读那篇文章
  • vue+Element ui中使用 upload实现Excel文件上传

    千次阅读 热门讨论 2020-06-29 17:34:11
    批量导入Excel文件 实现方式: 使用组件upload 具体步骤: 1、引入组件: <el-upload accept=".xlsx, .xls" //文件类型 :file-list="fileList" //存储文件的数组 :action="actionUrl" //请求的url :before-...

    业务需求:

    批量导入Excel文件

    实现方式:

    使用组件upload

    具体步骤:

    1、引入组件:
    		<el-upload
                  accept=".xlsx, .xls"  //文件类型
                  :file-list="fileList"   //存储文件的数组
                  :action="actionUrl"  //请求的url
                  :before-upload="beforeUploadFile" //文件上传之前的钩子
                  :on-exceed="exceedFile"  //文件超出个数时的钩子
                  :on-success="uploadSuccess" //文件上传成功时的钩子
                  :show-file-list="isShowFile"  //是否显示文件上传列表
                  multiple  //支持多文件上传
                  :limit="limitNum"  //文件上传个数限制
                >
                 <el-button type="primary" style="margin-left:0px">导入Excel</el-button>
           </el-upload>
    
    2、data中定义:
    	  fileList: [],    //excel 文件列表
          limitNum: 3,   //选择文件个数
          actionUrl: "/api/teach/importCourse", //上传文件url
          isShowFile: false //文件列表是否显示 默认不显示
    
    3、methods中方法:
    //文件上传之前的钩子
        beforeUploadFile(file) {
          console.log("before upload");
          console.log(file.size);
          var FileExt = file.name.replace(/.+\./, "");
          if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
            this.$message({
              type: "warning",
              message: "请上传后缀名为xls、xlsx的附件!"
            });
            return false;
          }
          //file.size 以字节为单位
          this.isLt2k = file.size / 2048 < 100 ? "1" : "0";
          if (this.isLt2k === "0") {
            this.$message({
              message: "上传文件大小不能超过100k!",
              type: "error"
            });
          }
          return this.isLt2k === "1" ? true : false;
        },
        //文件超出个数时的钩子
        exceedFile(files, fileList) {
          console.log("文件超出个数:", files);
          this.$message.warning(
            `只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length +
              fileList.length} 个`
          );
        },
    

    在这里插入图片描述

    //文件上传成功时的钩子
        uploadSuccess(response, file, fileList) {
          console.log("上传文件", response.data);
          console.log("返回状态", response.code);
          console.log(fileList);
          if (response.code != "0000") {
            this.excelData = response.data;
            this.exportErrorFile();
            return this.$message.error("导入失败!");
          } else {
            this.isShowFile = true;
            return this.$message.success("导入成功!");
          }
        },
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 实现文件上传并读取EXCEL表格中的数据
  • 首先呢,我的需求是用Excel表做数据导入,前端传入文件,后端拿到文件解析,然后插入数据库,由于对vue不熟悉,踩了很多的坑,最后还是做完了,这里分享一下我踩过的坑。 直接贴代码吧: <!--文件导入--> &...
    首先呢,我的需求是用Excel表做数据导入,前端传入文件,后端拿到文件解析,然后插入数据库,由于对vue不熟悉,踩了很多的坑,最后还是做完了,这里分享一下我踩过的坑。
    直接贴代码吧:
    
    <!--文件导入-->
        <template>
          <div>
            <el-upload
              class="filter-item"
              name="file"
              action="string"
              :on-error="uploadFalse"
              :on-success="uploadSuccess"
              :before-upload="beforeAvatarUpload"
              :limit="1"
              ref="upload"
              accept=".xlsx,.xls"
              :show-file-list="false"
              :file-list="fileList"
              :http-request="uploadFile"
            >
              <el-button  style="margin-left: 10px;" icon="el-icon-edit" type="primary" v-has-perm="">商品上架</el-button>
            </el-upload>
          </div>
        </template>
    

    最初,我在action里直接添加了后台的API地址,但是拿不到file文件。
    然后去查了很多帖子,把目光转到 :http-request="uploadFile"这个属性上面,
    在这里插入图片描述
    在这里插入图片描述

    action给了一个string值,http-request属性覆盖默认的上传行为,可以自定义上传的实现,从param.file可以直接拿到上传的file文件,拿到文件才能去传输,upload方法:

        async uploadFile(param){
          const File = param.file;
          let formData1 = new FormData();
          formData1.append("file", File);
          await obj.ExcelInsertGoodinStore(formData1);
          this.findPage();
        },
    

    ExcelInsertGoodinStore方法:你可以有自己的写法

    ExcelInsertGoodinStore(entity){
        return axios.post(`good/ExcelInsertGoodinStore`,entity)
      }
    

    其他的钩子函数:
    上传成功,上传失败,以及上传校验
    在这里插入图片描述

     async uploadSuccess(response, file, fileList) {
          console.log(response)
          if (response.status==20000) {
            this.$message({
              message: response.message,
              type: 'success'
            });
          } else {
            this.$message({
              message: response.message,
              type: 'error'
            });
          }
        },
        uploadFalse(response, file, fileList) {
          this.$message({
            message: '文件上传失败!',
            type: 'error'
          });
        },
        // 上传前对文件的大小的判断
        beforeAvatarUpload(file) {
          const extension = file.name.split(".")[1] === "xls";
          const extension2 = file.name.split(".")[1] === "xlsx";
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!extension && !extension2) {
            this.$message({
              message: '上传模板只能是 xls、xlsx格式!',
              type: 'error'
            });
          }
          if (!isLt2M) {
            console.log("上传模板大小不能超过 10MB!");
            this.$message({
              message: '上传模板大小不能超过 10MB!',
              type: 'error'
            });
          }
          return extension || extension2 || extension3 || (extension4 && isLt2M);
        },
    

    后台代码:
    很多帖子里会说name方法要与后台接收的参数一致,我一直都写一致的,所以也没发现报错,name=“file” 和后台接收写一致就好了,接收我是用MultipartFile 直接接收,怎么解析(这里就不写了),解析也有很多帖子

     /**
         * 商品批量导入功能
         */
        @RequestMapping(value = "/ExcelInsertGoodinStore", method = RequestMethod.POST)
        @ResponseBody
        public AxiosResult importGood(@RequestParam("file") MultipartFile file) {
            BaseGoodService.GoodImport(file);
            return AxiosResult.success(AxiosStatus.OK);
        }
    

    这样基本上就可以了,至于你要保存文件到什么地方,还是做文件解析,根据需求来吧。
    在这里插入图片描述

    展开全文
  • easyExcel是阿里巴巴开源的快速、简单避免OOM的java处理Excel工具,话不多说直接上代码。 1 在POM中引入EasyExcel的依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>...
  • 利用Hibernate+SpringMVC+spring写的一个上传一个Excel表并解析里面的数据保存到数据库,再显示到页面。
  • java实现excel文件上传,解析,导入

    万次阅读 2017-09-18 14:51:05
    首先要新建excel的变量,创建工作布,这里要用到poi相关jar包,我会直接上传到我的资源中 下面以面试管理的试题管理系统为例,上代码:package it.com.excel; import java.io.File; import java.io.IOException; ...
  • 主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能,需要的朋友可以参考下
  • 目录一、效果展示1、初始状态2、导入的Excel文件3、导入后状态4、文件信息过滤更新二、实现1、文件传递2、Controller层3、Service层4、ServiceImplements(1)下载并导入poi(2)判断文件类型并读取信息(3)将信息...
  • Vue 中实现 excel文件上传功能

    万次阅读 2019-01-25 18:06:21
    场景: 上传excel表,并将excel表中的数据构建成实体 &lt;div class="pull-right" v-if="doc"&gt; &lt;el-upload class="upload-demo" ...
  • 项目创建完成之后再pom.xml中加入操作Excel需要的jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.14</version> <...
  • web开发excel文件上传及解析(上)

    千次阅读 2018-11-17 11:34:22
    在web开发的时候,我们经常有遇到文件的上传以及解析的需求,比如我们将excel文件上传并且解析,最后将解析的excel的内容插入到数据库中,今天就实践一下文件的上传以及excel的解析,这篇博客主要是实践文件上传功能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,738
精华内容 23,095
关键字:

excel文件上传

友情链接: 02Whole.rar