文件下载 前端后端

最新推荐文章于 2024-04-08 14:32:11 发布
最新推荐文章于 2024-04-08 14:32:11 发布
阅读量215 收藏
点赞数
文章标签： 前端 java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54478931/article/details/124886005
版权

前端用element

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/vue.js"></script>

    <script src="/axios-0.18.0.js"></script>

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="zy1">

        你的姓名:<input v-model="name" /><br>

        <input type="file" v-model="tp" />

        [{{tp}}]

        <!-- <br>

        <input type="button" value="上传" @click="uploading" /> -->

        <br>

        <br>

        <el-upload class="upload-demo" action="http://127.0.0.1:8080/up/loading" :on-preview="handlePreview"

            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"

            :file-list="fileList">

            <el-button size="small" type="primary">点击上传</el-button>

            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

        </el-upload>

    </div>

    <script>

        new Vue({

            el: "#zy1"

            , data: {

                name: ''

                , tp: ''

                , fileList: []

            },

            methods: {

                uploading: function () {

                    var formData = new FormData();

                    formData.append('File', this.tp);

                    if (this.tp == '') {

                        alert("不能上传空文件")

                        return fales;

                    }

                    axios.post("http://127.0.0.1:8080/up/loading", {

                        params: {

                            name: this.name,

                            file: formData

                        }

                    }, { headers: { 'Content-Type': 'multipart/form-data' } }).then((ret) => {

                        console.log(ret.data)

                    })

                },

                handleRemove(file, fileList) {

                    console.log(file, fileList);

                },

                handlePreview(file) {

                    console.log(file);

                },

                handleExceed(files, fileList) {

                    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

                },

                beforeRemove(file, fileList) {

                    return this.$confirm(`确定移除 ${file.name}？`);

                }

            }

        })

    </script>

</body>

</html>

后端boot

package com.xxx.pro;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@CrossOrigin(origins="*")
@Controller
@RequestMapping("/up")
public class io {


        @RequestMapping("/loading")
        @ResponseBody
        public String uploading(@RequestParam(name = "file",required=false)  MultipartFile file ) {
            if (file.isEmpty()) {
                return "文件为空";
            }
            // 获取文件名
            String fileName = file.getOriginalFilename();
            System.out.println("上传的文件名为：" + fileName);
            // 获取文件的后缀名
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            System.out.println("上传的后缀名为：" + suffixName);
            // 文件上传后的路径
            String filePath = "D://";
            File dest = new File(filePath + fileName);
            // 检测是否存在目录
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            try {
                file.transferTo(dest);
                return "上传成功";
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return "上传失败";
        }
}

123456wym
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot框架下，前后端实现文件交互——文件下载
m0_47396944的博客
09-16 4021
上篇介绍了前后端交互的文件上传功能，本篇将继续介绍文件下载功能实现 【前端】 HTML: <button type="button" id="btn1">下载文件</button> JS: //测试 var $eleBtn1 = $("#btn1"); //缺点：会出现一个新页面，但下载好后迅速关闭，下载效果不佳 //方法一：window.open() // $eleBtn1.click(function(){
前后端传递数据下载文件
魔仙佩奇
04-29 268
前端get传递数组并处理后端返回文件流 import axios from 'axios'; axios({ url: 'http://localhost:8080/?name='+selectedCards, method: 'GET', responseType: 'blob', success: function (result) { ...
下载文件-前后端解决方案
weixin_43821573的博客
08-21 491
下载文件-前后端解决方案 java 下载远程地址文件 // response直接返回文件流 private void outputStream(HttpServletResponse response,String url){ try{ URL fileUrl = new URL(url); HttpURLConnectio...
文件上传与下载-前后端处理
伊人笑桃花酒的博客
03-10 864
文件上传 前端组件-使用Element封装的组件 &lt;el-upload name="file" class="upload-demo" :action="/saveFiles/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :o
前端常用的【文件下载操作1】前端配合后端进行文件下载==＞根据url下载 ==＞根据blob下载
Sabrina_cc的博客
02-23 3413
当我不再固执于我，而是站在更高的角度看待自己时，才能真正看到更真实的自己。 ---我在未来等你 当前项目：网安信息化系统安全运维管理平台 本章主要涉及：工单管理and资源配置模板下载 一.根据url下载文件 1.功能设计 点击模板链接，下载文件，下载的文件的文件名为对应模板名称。 2.接口返回值 // 资源管理页面-导入-下载模板 export......
2022 软件库APP源码前端 后端整套独立后台
04-20
标题中的“2022 软件库APP源码前端 后端整套独立后台”指的是一个完整的软件开发项目，包含2022年版本的软件应用的前端和后端源代码。这个项目可能是一个应用程序（APP）的源码，提供了一套独立的后台管理系统，意味...
前端后端和数据库代码资源
01-10
这个"前端后端和数据库代码资源"的压缩包包含了这三部分的关键代码，为开发者提供了全面的开发工具集。 首先，让我们深入理解每个部分的核心概念： 1. **前端**：前端是用户与应用程序交互的部分，它包括网页的...
aes 前端加密 后端c# 解密
12-22
在前端JavaScript和后端C#环境中，AES加密和解密是非常常见的需求，特别是在传输敏感信息时，如用户密码、个人信息等。 在前端，JavaScript库如`crypto-js`（压缩包中的crypto-js.js文件）被用来实现AES加密。`...
前端后端连接复习新手代码安装包
06-06
这个"前端后端连接复习新手代码安装包"显然是为了帮助初学者理解这两者之间的交互和合作方式。在这个安装包中，可能包含了示例代码、教程文档和其他相关资源，帮助初学者快速上手。 前端开发主要关注用户所看到和与...
前后端拆解与组合.pptx_前端设计_前端后端_
10-02
【标签解读】：“前端设计”和“前端后端”这两个标签进一步确认了文档的主题。前端设计涵盖了所有与用户直接交互的部分，包括视觉设计、布局、动画效果等；而“前端后端”则可能涉及到前后端的协作流程，如API接口...
vue实现下载文件流完整前后端代码
01-21
使用Vue时，我们前端如何处理后端返回的文件流 首先后端返回流，这里我把流的动作拿出来了，我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@PathVariable(docId) String docId, HttpServletResponse response) { outWrite(response, docId); } /** * 输出文件流 * @param response * @param do
前后端开发文档完整版
12-28
包含常用的开发文档比如jdk1.8,1.9,疯狂java版java设计模式，MySQL5中文参考手册,W3School离线手册(2016.07.15),XPathTutorial,MyBatis3用户指南中文版,JqueryEasyUI1.4参考手册，等等欢迎下载
前后端分离实践
08-22
前后端分离，很不错的私人制作pdf文档
文件下载的三种方式，前端和后端实现
热门推荐
u012631731的博客
02-21 4万+
使用文件的下载功能，在这里分享一下： 1.这种方法是直接通过服务端提供的文件地址，直接从服务端下载文件downloadfile(){this.url = "localhost:8000/home/home/file.txt"; let elem = document.createElement('iframe'); elem.src = url; elem.sty
前后端分离架构文件上传与下载(含Vue + Spring完整代码)
Staba的博客
03-06 5181
本文采用前后端分离式的架构，其中涉及到文件下载的需求，文件下载在任何系统中都是比较常见的。对于前后端分离架构的文件下载与往常的写法有些许不同(试过直接使用a标签，href填上下载地址，发现行不通)，所以经过查找与尝试，以下文件下载前后端实现流程供大家参考。
【vue工作随笔】前端配合后端进行文件下载的方法记录
最新发布
2301_82244343的博客
04-08 2523
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取。
前端接受后端文件并下载的几种方法-转自网络
tangdou369098655的博客
09-05 304
方法一get <a href="后端文件下载接口地址" >下载文件</a> 直接用个标签来接受后端的文件流 方法二post 使用场景 针对后端的post请求 利用原生的XMLHttpRequest方法实现 具体实现 function request () { const req = new XMLHttpRequest(); req.open('POST'...
前端下载和文件下载的几种方式
qq_40664757的博客
02-21 1128
目前前后端下载方式通常分为两种 第一种: 后端返回文件流，前端自己创建blob对象和A链接下载 第二种: 后端返回可写流，前端直接location.href或者A连接直接下载 第二种无疑对于前端同学更省事，无代码侵入和无感知下载 我今天用node express框架做代码演示 下面将两种下载方式的前后端代码分别展示： 第一种下载方式后端代码： ```javascript /** * 返回前端一个blob可写流，前端需要自己创建a连接下载 */ router.post('/downloadFile',
【Java 实现文件下载】vue前端+java后端实现文件下载详解（附源码）
赏樱看雪撸代码
03-19 4609
java文件下载，文件下载中文名乱码，前后端实现文件下载，excel文件下载，vue下载文件，vue+java实现文件下载
多文件上传 前端 后端 详解
05-13
多文件上传指的是一次上传多个文件，而不是一次只上传一个文件。下面我会分别介绍前端和后端的实现方式。 前端实现： 前端通常使用HTML中的`<input type="file" multiple>`元素来实现多文件上传功能，其中`multiple`属性表示允许选择多个文件。用户选择文件后，前端会将文件信息存储在FormData对象中，然后通过ajax请求将FormData对象发送到后端。 示例代码： ```html <form id="file-form"> <input type="file" id="file-input" multiple> <button type="submit">上传文件</button> </form> <script> const form = document.getElementById('file-form'); const fileInput = document.getElementById('file-input'); form.addEventListener('submit', (e) => { e.preventDefault(); const formData = new FormData(); for (let i = 0; i < fileInput.files.length; i++) { formData.append('files', fileInput.files[i]); } fetch('/upload', { method: 'POST', body: formData }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); }); </script> ``` 后端实现： 后端通常使用框架提供的文件上传中间件来处理文件上传，例如Node.js中的`multer`中间件。后端接收到前端发送的FormData对象后，通过中间件解析出文件信息，然后将文件保存到指定目录。 示例代码（使用Express框架和multer中间件）： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('files'), (req, res) => { console.log(req.files); res.send('上传成功'); }); app.listen(3000, () => { console.log('服务已启动'); }); ``` 在上面的示例中，`multer`中间件的`upload.array('files')`表示接收名为`files`的文件数组。在处理上传成功后，后端会返回一个响应，告诉前端上传成功。 需要注意的是，在上传大文件时，为了避免内存溢出，通常需要对文件进行分片上传和断点续传等优化处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值