精华内容
下载资源
问答
  • vue的文件上传

    千次阅读 2020-12-21 10:13:04
    步骤 ... 在事件处理函数中传入事件对象,通过事件对象获取文件对象e.target.files[0] 创建表单对象let formData = new FormData();...放入文件对象 formData.append(“file”,e.target.files[0]);...后台通过上传对象M
    步骤
    1. 在input组件中添加点击事件@change=“upload”

    2. 在事件处理函数中传入事件对象,通过事件对象获取文件对象e.target.files[0]

    3. 创建表单对象let formData = new FormData();

    4. 放入文件对象 formData.append(“file”,e.target.files[0]);

    5. 通过axios设置请求头headers:{‘content-type’:‘multipart/form-data’}和提交方式post

    6. 后台通过上传对象MultipartFile file接受页面:

    <div id="div1">
       <input type="file" accept=".xls,.xsls"  @change="upload"/>
    </div>			
    <script>
       	var vm = new Vue({
       		el:'#app',
       		/*
       		由于vue的响应式原理   data 如果是一个对象,对象中使用this不会自动绑定为vue对象,需要通过回调函数方式,vue才会在调用该函数的时候,进行双向绑定,并且自动传入
       		当前vue对象到函数中
       		*/
       		data:function(){
       			console.log(this);
       			return {
       				file:''
       			}
       			
       		},
       		methods:{
       			upload:function(e){
       				this.file = e.target.files[0];
       				console.log(this.file);
       				let formData = new FormData();
       				formData.append("file",this.file);
       				axios({
       					method:'post',
       					headers:{'content-type':'multipart/form-data'},
       					url:'/guguanjia/manager/area/importExcel',
       					data:formData
       				}).then(response =>{
       					console.log(response.data);
       				}).catche(function(error){
       					
       				});
       				
       			}
       		}
       		
       	});
    </script>
    
    1. 后台
    @RequestMapping("importExcel")
       public void importExcel(@RequestParam("file")MultipartFile file){
           System.out.println((file.getOriginalFilename()));
           。。。
       }
    
    展开全文
  • 前端vue框架,后端go语言,实现对图片的上传,并存储在本地服务器。
  • springgboot + elementui文件上传下载

    我们项目需要一个文件上传在后台解析后再下载的功能,正好记录一下,以后拿来就能用,有问题的小伙伴可以留言,一起解决哦。

    文件上传

    前端

    我使用了element-ui的上传组件,由于需要携带自己的参数,所以覆盖了默认上传的方法,改用自己post上传,并加入了Loading组件,提高使用感。细节看代码。

    <template>
        <el-main style="margin-left: 50%; transform: translateX(-200px)">
            <div>
                <h1>解析板块</h1>
            </div>
            <div class="upload-box">
                <el-upload
    				<!-- action必须为空 -->
                    action=""
                    class="upload"
                    ref="upload"
    				<!-- 限制只能上传一个文件 -->
                    :limit="1"
    				<!-- 自定义提交函数 -->
                    :http-request="myUpload"
    				<!-- 关闭自动提交 -->
                    :auto-upload="false" 
    				<!-- 提交前触发的函数 -->
                    :before-upload="beforeUpload"
    				<!-- 从待上传文件列表中删除文件触发的函数 -->
                    :on-remove="formHandleRemove"
    				<!-- 文件允许上传的格式 -->
                    accept=".txt"
    				<!-- 待上传文件列表 -->
                    :file-list="fileList">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 20px" size="small" type="success" @click="upload">解析</el-button>
    				<!-- v-if 当解析完成后,会显示出来 -->
                    <el-button v-if="downloadUrl" size="small" type="warning"><a :href="downloadUrl">下载</a></el-button>
                    <div slot="tip" class="el-upload__tip"><p>单文件上传</p>只能上传txt文件,最大100MB</div>
                </el-upload>
            </div>
        </el-main>
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
        name: "Analyze",
        data() {
            return {
    			// 待上传文件列表
                fileList: [],
    			// 文件名
                fileName: "",
    			// 后台接口
                url: "step_one/analyze",
                // 下载地址
    			downloadUrl: "",
            };
        },
        methods: {
            // 以elementui的方式提交,on-remove  before-upload 这些属于elementui的属性才能生效.
    		// 也可以全部自己写然后在自定义上传函数调用.
            async upload() {
                this.$refs.upload.submit();
            },
    		// 自定义上传函数 param 是 上传的参数,默认存在
            myUpload(param) {
    			// 开启loading
                const loading = this.$loading({
                    lock: true,
                    text: '正在解析,请稍候。。。',
                    spinner: 'el-icon-loading',
                });
    			// 因为后台接收formdata格式,所以要创建formdata对象
                const formdata = new FormData()
    			// 添加参数
                formdata.append('file', param.file)
                formdata.append('fileName', this.fileName)
                // post上传
    			this.$http.post(this.url, formdata).then(res => {
                    let data = res.data
    				// 获取成功
                    if (data.code === 200) {
                        this.$message.success(data.msg);
    					// 给downloadUrl赋值,同时,下载按钮会出现
    					this.downloadUrl = this.$http.defaults.baseURL  + "download/" + this.fileName;
                    } 
    				// 获取失败
    				else {
    					this.$message.error(data.msg);
                    }
    				// 关闭loading
                    loading.close();
                })
    			// 清空列表
                this.fileList = []
            },
            formHandleRemove(file) {
    			// 从fileList中移除选中的文件
                for (let i = 0; i < this.fileList.length; i++) {
                    if (this.fileList[i].name === file.name) {
                        this.fileList.splice(i, 1)
                        break
                    }
                }
            },
            beforeUpload(file) {
    			// 限制100M
                if (file.size > 100 * 1024 * 1024) {
                    this.$message.error('上传文件过大!')
                    return false
                }
                let filename = file.name
                let arr = filename.split('.')
    			// 检验上传文件格式
                if (arr[1] !== 'txt') {
                    this.$message.error('上传文件只能是 txt 格式!')
                    return false
                }
                this.fileName = arr[0];
                return arr
            },
        }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    后端

    后端对文件解析之后保存在本地,方便用户下载。直接抛异常是因为有全局异常处理,在这里不是重点,就不细说了。

    @PostMapping("step_one/analyze")
    public R segment(@RequestParam("file") MultipartFile file, @RequestParam(value = "fileName") String fileName) throws Exception {
        // 加txt后缀
        fileName += ".txt";
        // 文件完整路径 savePath是保存路径
        String filePath = savePath + fileName;
        // 读取文件
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        InputStream ips = file.getInputStream();
        byte[] buffer = new byte[8192]; // 这样效率与缓冲流持平
        int len = 0;
        while ((len = ips.read(buffer)) != -1) {
            baos.write(buffer, 0, len);
        }
        String content = baos.toString();
        // 解析文件
        System.out.printf("正在解析--%s\n", fileName);
        PerceptronLexicalAnalyzer analyzer = new PerceptronLexicalAnalyzer();
        Sentence analyze = analyzer.analyze(content);
        System.out.printf("解析完成--%s\n", fileName);
        // 保存文件
        System.out.printf("开始保存--%s\n", filePath);
        FileOutputStream fops = new FileOutputStream(filePath);
        fops.write(analyze.toString().getBytes());
        System.out.printf("保存完毕--%s\n",filePath);
        // 关闭流
        ips.close();
        fops.close();
        baos.close();
        // 返回
        return new R(200, "解析成功", null);
    }
    

    效果

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

    下载

    前端

    在上传成功之后,我们就获得了下载地址,直接用 a 标签即可。

        <el-button v-if="downloadUrl" size="small" type="warning"><a :href="downloadUrl">下载</a></el-button>
    

    后端

    后端只需要设置一下响应头即可。值得注意的是如果是中文文件名必须要转一下码,否则不会正常显示,细节看代码。

     @RequestMapping("download/{fileName}")
     public void download(HttpServletResponse response, @PathVariable String fileName) throws Exception {
         fileName += ".txt";
         // 设置请求头 new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1) 转码
         response.setHeader("Content-Disposition", "attachment; filename="
                 + new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1));
         System.out.printf("正在下载--%s\n", fileName);
         // 从刚刚保存的路径下载
         FileInputStream fips = new FileInputStream(savePath + fileName);
         // 获取输出流
         ServletOutputStream sops = response.getOutputStream();
         byte[] buffer = new byte[8192];
         int len = 0;
         while ((len = fips.read(buffer)) != -1) {
             sops.write(buffer, 0, len);
         }
         System.out.printf("下载完毕--%s\n", fileName);
         // 关闭流
         sops.flush();
         fips.close();
         sops.close();
     }
    

    效果

    在这里插入图片描述

    展开全文
  • 测试人将一个40MPDF上传服务器,然后报413(请求...#设置请求实体大小,避免文件上传的时候出现413 spring.servlet.multipart.max-file-size=1024MB spring.servlet.multipart.max-request-size=1024MB spring.

    测试的人将一个40M的PDF上传服务器,然后报413(请求实体过大)

    然后自己去测试,发现一个post请求,默认请求实体是10M

    解决办法:

    application.properties(application.yaml)设置允许最大的实体的值

    #设置请求实体的大小,避免文件上传的时候出现413
    spring.servlet.multipart.max-file-size=1024MB
    spring.servlet.multipart.max-request-size=1024MB
    spring.servlet.multipart.enabled=true

    如果有大文件上传,建议还是处理成分片的形式上传。

    展开全文
  • Vue实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端接口只给了一个API请求: 前端第一个...

    文件下载:
    文件下载通常有几种方法
    1.通过url下载
    2.location.href
    3.form提交直接下载
    4.HTML5 a.download结合blob对象进行下载
    第一种方式:
    第一种方法是前后端的接口只给了一个API请求:
    前端第一个实现是使用a标签,

    第二种方式:
    这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种方式:

    window.location.href = urls; // 本窗口打开下载
    window.open(urls, '_blank'); // 新开窗口下载
    

    第三种:
    标签的download是HTML5标准新增的属性,作用是指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
    这种是定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存

          this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

    第四种form表单
    不需要我们处理返回二进制流直接下载,非常方便
    form的action设置为接口地址,method设置为post,Post到后台的数据设置为input的属性 name = key,value = value的形式,如果有多个key、value的值要传递,那么就设置多个input来分别储存单个的key、value;
    如果请求的接口可以不需要参数,那么input还是必须要一个,如果不要得话 会引起接口报错
    原理:form的action相当于一个浏览器本页签/页面的一个请求,不会被后台,前台的路由拦截。所以能够提交成功。

    注意点:如果设置method为get,在action中的uri添加了参数的话,想用这个参数替代input的key、value形式来提交到后台,这参数是没有效果的,后台拿不到这些参数,真正的参数还是以input的name、value的形式储存,在submit方法执行后传递到后台。
    这样我们就是实现了文件下载,但是表单提交的数据一般是简单的键值对,如果传参比较复杂可以考虑将表单序列化提交。

    因为项目是基于vue的,而且提交的请求参数涉及很多参数,比较复杂,所以采用了方法三来实现

          axios.post('/rest/inventory/oh_status/info/excel', {
            site: this.selectedsite,
            bu: this.selectedbu,
            ohHealthStatus: this.selectedtitle,
            ohHealthRootcause: this.selectedblock,
            search: this.search,
            sort: this.sort
          }, {responseType: 'arraybuffer'}).then(this.ExportFile).catch(function (error) {
            console.log(error)
          })
    
         this.content = content
          this.filename = filename
          const blob = new Blob([this.content])
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, this.filename)
          } else {
            //  chrome/firefox
            let aTag = document.createElement('a')
            aTag.download = this.filename
            aTag.href = URL.createObjectURL(blob)
            aTag.click()
            URL.revokeObjectURL(aTag.href)
          }
    

    注意我们发送请求的时候一定要写上responseType,{responseType: 'arraybuffer'} 否则下载下来的文件打不开!!!

    文件上传
    文件上传通常使用form表单,但是有时候我们不想要用表单,ES6的fromData来实现

        handleGetFile (data) {
          this.file = data
          let formdata = new FormData()
          formdata.append('file', this.file)
          formdata.append('submit', false)
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          axios.post('/rest/master_data/ct2r/odin_delivery_metrics/cvc/file_upload_review', formdata, config).then(this.sendFileSucc)
        },
    

    首先 我们获取完文件之后,创建FormData对象,配置头部,发送该请求就OK了,别忘了让后台将接收头部请求改为formdata的格式

    如果文件是图片或者视频的话,部分浏览器会直接打开,非下载,这个时候我们可以在下载链接 url 后面加上 ?response-content-type=application/octet-stream 这个参数可以实现点击下载功能。

    展开全文
  • vue的文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发...
  • vue上传文件组件 vue的简单文件上传组件 (A simple file upload component for vue) ... vuejs的文件上传组件。 现场演示 (Live demo) https://dai-siki.github.io/vue-upload-file/example/demo.html https...
  • vue实现文件上传功能

    2020-10-18 05:59:38
    主要为大家详细介绍了vue实现文件上传功能,具有一定参考价值,感兴趣小伙伴们可以参考一下
  • SpringBoot+Vue表单文件上传

    千次阅读 2018-09-22 13:50:45
    Spring Boot + Vue 的文件上传本身没有什么难点,但如果涉及到是一个表单对象中存在文件,则会比较繁琐 更多精彩 更多技术博客,请移步 asing1elife’s blog 后端实体类 Spring Boot中对于文件的接收...
  • VUE文件上传

    2020-11-18 23:03:33
    记录VUE文件上传(VUE) 基于项目临时需要开发一个大视频上传功能,基于从网上找到解决方案 和自己项目实战,这里分享一下自己整理上传流程 第一步, 文件上传前获取文件和文件大小, 计算切片数量 准备工作 ...
  • vue上传文件组件 用于文件上传的Vue组件 (A Vue component for file uploads) A Vue.js component for Dropzone.js - a drag’n’drop file uploads utility with image previews. Dropzone.js的Vue.js组件-具有...
  • 本篇文章主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例为大家分享了springboot+vue实现文件上传下载具体代码,供大家参考,具体内容如下 一、文件上传(基于axios简单上传) 所使用技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • vue上传文件组件A simple file upload component for Vue.js. Emits events for XHR ... Vue.js简单文件上传组件。 发出XHR Upload Progress事件以获取良好进度条。 Vue文件上传组件 (vue-file-upload-compon...
  • 主要介绍了node+vue实现文件上传功能,文中示例代码介绍非常详细,具有一定参考价值,感兴趣小伙伴们可以参考一下
  • vue的文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发...
  • vue实现文件上传

    万次阅读 多人点赞 2018-03-28 10:57:55
    文件上传的传统方式是通过 form 表单提交,但是今天我们将换一种方式来实现这个功能。同一口味东西吃多了还会腻呢,所以适当时候换一换口味还是有必要,好了,直接进入正文。首先,来介绍一下我们今天主角 -...
  • vue超大文件上传

    2020-03-28 17:54:52
    众所皆知,web上传大文件,一直是一个痛。上传文件大小限制,页面响应...大文件上传及断点续传,要求:支持50G级单个文件上传和续传。续传要求:在刷新浏览器后能够续传上传,在重启浏览器后能够继续上传上(关...
  • 主要为大家详细介绍了vue实现文件上传读取及下载功能,具有一定参考价值,感兴趣小伙伴们可以参考一下
  • 本文实例为大家分享了vue实现文件上传读取及下载具体代码,供大家参考,具体内容如下文件上传利用input标签type="file"属性,读取用FileReader对象,下载通过创建a标签实现下载export default {data () {...
  • vue 文件上传,供大家参考,具体内容如下首先 先说一下想要实现的效果就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现vue 实现vue 页面代码class="upload-demo"ref="upload"action...
  • vue里一般上传文件会用到一些组件,本次使用是el-upload,这里只是介绍一种思路, 其他组件类似,有碰到类似问题,欢迎探讨。 前端小白,涉及到代码可能会有点粗糙,欢迎来喷。一开始在demo时候,直接用...
  • SpringBoot+Vue上传文件

    2021-03-10 18:21:32
    最近在研究SpringBoot+Vue的文件上传,踩了不少坑。现在将正确的文件上传流程分享一下。 一、前端采用ElementUI组件 前端页面完整代码: <template> <el-upload class="upload-demo" action=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,101
精华内容 1,640
关键字:

vue的文件上传

vue 订阅