精华内容
下载资源
问答
  • springboot整合vue实现上传下载文件

    万次阅读 多人点赞 2019-05-06 18:46:43
    上传大文件配置3.vue前端主要部分 环境 springboot 1.5.x 完整代码下载: springboot整合vue实现上传下 1上传下载文件api文件 设置上传路径,如例子: private final static String rootPath =...

    springboot整合vue实现上传下载文件


    环境

    springboot 1.5.x

    完整代码下载:

    springboot整合vue实现上传下

    1上传下载文件api文件

    设置上传路径,如例子:

    private final static String rootPath =
    System.getProperty(“user.home”)+File.separator+fileDir+File.separator;

    api接口:

    下载url示例:http://localhost:8080/file/download?fileName=新建文本文档.txt

    //上传不要用@Controller,用@RestController
    @RestController
    @RequestMapping("/file")
    public class FileController {
        private static final Logger logger = LoggerFactory.getLogger(FileController.class);
        //在文件操作中,不用/或者\最好,推荐使用File.separator
        private final static String  fileDir="files";
        private  final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator;
        @RequestMapping("/upload")
        public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){
            File fileDir = new File(rootPath);
            if (!fileDir.exists() && !fileDir.isDirectory()) {
                fileDir.mkdirs();
            }
            try {
                if (multipartFiles != null && multipartFiles.length > 0) {
                    for(int i = 0;i<multipartFiles.length;i++){
                        try {
                            //以原来的名称命名,覆盖掉旧的
                            String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                            logger.info("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                    +",保存的路径为:" + storagePath);
                             Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                            //或者下面的
                             // Path path = Paths.get(storagePath);
                            //Files.write(path,multipartFiles[i].getBytes());
                        } catch (IOException e) {
                            logger.error(ExceptionUtils.getFullStackTrace(e));
                        }
                    }
                }
    
            } catch (Exception e) {
                return ResultUtil.error(e.getMessage());
            }
            return ResultUtil.success("上传成功!");
        }
    
        /**
         * http://localhost:8080/file/download?fileName=新建文本文档.txt
         * @param fileName
         * @param response
         * @param request
         * @return
         */
        @RequestMapping("/download")
        public Object downloadFile(@RequestParam String fileName, final HttpServletResponse response, final HttpServletRequest request){
            OutputStream os = null;
            InputStream is= null;
            try {
                // 取得输出流
                os = response.getOutputStream();
                // 清空输出流
                response.reset();
                response.setContentType("application/x-download;charset=GBK");
                response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1"));
               //读取流
                File f = new File(rootPath+fileName);
                is = new FileInputStream(f);
                if (is == null) {
                    logger.error("下载附件失败,请检查文件“" + fileName + "”是否存在");
                    return ResultUtil.error("下载附件失败,请检查文件“" + fileName + "”是否存在");
                }
                //复制
                IOUtils.copy(is, response.getOutputStream());
                response.getOutputStream().flush();
            } catch (IOException e) {
                return ResultUtil.error("下载附件失败,error:"+e.getMessage());
            }
            //文件的关闭放在finally中
            finally
            {
                try {
                    if (is != null) {
                        is.close();
                    }
                } catch (IOException e) {
                    logger.error(ExceptionUtils.getFullStackTrace(e));
                }
                try {
                    if (os != null) {
                        os.close();
                    }
                } catch (IOException e) {
                    logger.error(ExceptionUtils.getFullStackTrace(e));
                }
            }
            return null;
        }
    }
    
    

    访问:http://localhost:8080
    在这里插入图片描述

    上传
    在这里插入图片描述
    批量上传:
    在这里插入图片描述
    下载:
    在这里插入图片描述

    2.上传大文件配置

    /**
         * 设置上传大文件大小,配置文件属性设置无效
         */
        @Bean
        public MultipartConfigElement multipartConfigElement() {
            MultipartConfigFactory config = new MultipartConfigFactory();
            config.setMaxFileSize("1100MB");
            config.setMaxRequestSize("1100MB");
            return config.createMultipartConfig();
        }
    

    3.vue前端主要部分

    <template>
        <div style="top:100px;width:300px">
            <el-form :model="form" label-width="220px">
                <el-form-item label="请输入文件名" required>
                    <el-input v-model="form.fileName" auto-complete="off" class="el-col-width" required></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="handleDownLoad">下载</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload"  :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">一次文件不超过1Gb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
    
        </div>
    </template>
    
    展开全文
  • 使用springboot+vue技术,实现分片 快速上传
  • Vue项目无法上传文件

    2021-02-23 22:01:03
    Vue项目无法上传文件 由于默认nginx限制了文件上传大小,我们需要对其配置进行修改 对其http、server、location中文件上传进行大小设置成1024m! 亲测有效! 记得重启nginx才能生效 systemctl restart nginx....

    Vue项目无法上传文件

    由于默认nginx限制了文件上传大小,我们需要对其配置进行修改
    对其文件上传进行大小设置成1024m
    对其http、server、location中文件上传进行大小设置成1024m!
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    亲测有效!

    记得重启nginx才能生效

    systemctl restart nginx.service
    
    展开全文
  • vue上传大文件的解决方案

    vue上传大文件的解决方案

    参考文章:

    (1)vue上传大文件的解决方案

    (2)https://www.cnblogs.com/songsu/p/11896353.html


    备忘一下。


    展开全文
  • vue 文件上传判断文件尺寸级大小

    千次阅读 2018-08-01 15:04:00
    一、vue 基于elementui实现文件或图片上传判断文件或图片的尺寸;本例基于图片上传的demo <el-form-item label="添加图片"> <div class="imgList"> <div class="imgBox" :cl...
    一、vue 基于elementui实现文件或图片上传判断文件或图片的尺寸;本例基于图片上传的demo

    <
    el-form-item label="添加图片"> <div class="imgList"> <div class="imgBox" :class="{pitch:item.alter}" v-for="(item,indexs) in imageArr" :key="indexs" @mousemove="moveImg(item)" @mouseout="outImg(item)"> <img class="img" :preview="indexs" :src="item.url"/> <img v-if="item.alter" @click="deleteImg(indexs)" class="deleteImg"src="../../assets/img/deleteImg.png"/> </div> <el-upload multiple class="avatar-uploader" :action="action" accept="image/*" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <i v-if="imageArr.length<1" class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <div class="el-upload__tip" slot="tip">banner尺寸为750*388px , 支持jpg/png格式,不超过5M</div> </div>
    </el-form-item>

     
      
    export default {
        data(){
            return {
                picture:[],
                picname:[],
                imageArr:[],
           }
        },
        methods:{
          handleAvatarSuccess(res, file) {
                this.picture.push(res.data);
                this.picname.push(res.fileName);
                this.imageArr.push({url: URL.createObjectURL(file.raw), alter: false});
            },
            beforeAvatarUpload(file) {
                const isLt5M = file.size / 1024 / 1024 < 5;
                const isJPG = checkImg(file.name);
                if (!isLt5M) {
                    this.$message.error('上传图片大小不能超过5MB!');
                }
                if(!isJPG){
                     this.$message.error('上传图片格式是jpg/jpeg/png!');
                }
            //核心代码部分 const isSize
    = new Promise(function(resolve, reject) { let width = 750; let height = 388; let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function() { let valid = img.width == width && img.height == height; valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(() => { return file; }, () => { this.$message.error('banner尺寸必须是750*388!'); return Promise.reject(); }); return isLt5M && isJPG && isSize; }, moveImg(item){ item.alter = true; }, outImg(item){ item.alter = false; }, deleteImg(index){ this.$confirm('您确定要删除作品图片吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(() => { this.imageArr.splice(index,1); this.picture.splice(index,1); }).catch(() => { }); }, } }
     
      

     其中 checkImg()方法是判断图片的格式,通过这种方式可判断出上传图片的尺寸及大小!

     

     

    转载于:https://www.cnblogs.com/tiantianleyuan123/p/9401323.html

    展开全文
  • vue 文件上传 带格式、类型、大小、进度展示
  • Vue实现文件上传文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • 上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的。 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路。 实现文件夹上传,要求:服务端保留层级结构,支持10w级别的...
  • vue.js,vue-loader上传文件vue-file-upload代码里面包含demo,运行: yarn install && yarn start 安装 npm npm install --save vue-file-upload 普通JS var VueFileUpload = require ( 'vue-file-upload' ) ;...
  • vue上传文件相同文件问题

    千次阅读 2018-03-13 16:30:30
    vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是原生JS或者基于jQuery操作dom结构的。那么在vue项目中如何实现呢,还有如何模拟表单文件提交呢? 这里...
  • Vue input上传excel文件

    千次阅读 2019-01-17 10:52:45
     this.$Message.error('上传格式不正确,请上传xls或者xlsx格式');  return false;  }    const fileReader = new FileReader();  fileReader.onload = (ev) => {  try {  const data ...
  • Vue上传文件

    千次阅读 2018-11-07 14:58:29
    Vue上传文件 上传效果 上传类型 这里的文件暂定义为:doc、docx、rar、zip、pdf、txt【这个可以自己定义,后台进行判断即可】 用到的框架及标签 框架element 标签el-upload 关键代码 上传标签代码   &...
  • vue+axios上传文件

    万次阅读 2018-01-11 16:34:51
    vue+axios上传文件
  • vue+elementui 上传文件时限制上传文件的类型和大小 重点属性–:before-upload="beforeAvatarUpload" html代码: <el-upload class="upload-demo" ref="upload1" :action="baseUrl+'/module/v1/manage/'" :...
  • 问题描述 关于elementUI文件上传校验功能实现 代码 <el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="upload...
  • vue 批量上传文件

    千次阅读 2021-01-11 17:21:50
    业务背景:一次性批量上传多个文件,只请求一次接口,则手动提交到后台 简单说明一个实现思路: 1.前端vue统一处理多个文件保存到formData对象中,请求后台接口 2.后台接口使用HttpServletRequest 进行接收,可转化成...
  • vue+大文件上传控件

    2019-09-09 09:49:24
    总结一下大文件分片上传和断点续传的问题。因为文件(比如1G以上),必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较时,http协议自动会将文件切片(分块...
  • vue 文件上传

    千次阅读 2018-08-11 18:20:40
    vue 文件上传 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 &amp;lt;el-upload class=&quot;upload-...
  • vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要vendor,使用vue上传文件需要
  • vue.js多文件上传 vue-upload-component (vue-upload-component) Vue.js file upload component, Support for multiple file uploads, progress, html4, ie9 Html4 does not support the progress bar, file size, ...
  • 适合快速集成vue 大文件上传的项目 包括断点续传 秒传 分片上传
  • vue实时上传文件进度条 //上传文件组件 <el-upload action :show-file-list="false" :before-upload="uploadFile" > <el-button type="primary" :disabled="progressFlag">上传数据</el-button&...
  • vue实现文件上传功能

    2021-01-19 17:22:17
    vue 文件上传,供大家参考,具体内容如下 首先 先说一下想要实现的效果 就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现 vue 实现 vue 页面代码 ref=upload action=...
  • VUE上传文件方法

    2020-04-17 14:14:30
    VUE上传文件方法
  • 一、excel文件上传 1、html代码: <el-button size="mini" :plain="true" class="file-box" type="button"> 导入 <input id="up" ref="file" type="file" class="file-btn" @change="inputCustomProd...
  • 主要介绍了axios+Vue上传文件显示进度效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助 关于上传,总是有很多可以说道的。 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,523
精华内容 17,009
关键字:

vue无法上传大文件

vue 订阅