• 售前

  • 售后

热门帖子
入门百科

前端vue+express实现文件的上传下载示例

[复制链接]
陈嘉凯 显示全部楼层 发表于 2022-1-8 04:28:53 |阅读模式 打印 上一主题 下一主题
新建server.js
  1. yarn init -y
  2. yarn add express nodemon -D
  3. var express = require("express");
  4. const fs = require("fs");
  5. var path = require("path");
  6. const multer = require("multer"); //指定路径的
  7. var app = express();
  8. app.use(express.json());
  9. app.use(express.urlencoded({ extended: true }));
  10. // 前端解决跨域问题
  11. app.all("*", (req, res, next) => {
  12.   res.header("Access-Control-Allow-Origin", "*");
  13.   next();
  14. });
  15. // 访问静态资源
  16. app.use(express.static(path.join(__dirname)));
  17. // 文件上传
  18. app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
  19.   const { fieldname, originalname } = req.files[0];
  20.   // 创建一个新路径
  21.   const name = fieldname.slice(0, fieldname.indexOf("."));
  22.   const newName = "public/" + name + path.parse(originalname).ext;
  23.   fs.rename(req.files[0].path, newName, function (err) {
  24.     if (err) {
  25.       res.send({ code: 0, msg: "上传失败", data: [] });
  26.     } else {
  27.       res.send({ code: 1, msg: "上传成功", data: newName });
  28.     }
  29.   });
  30. });
  31. // 文件下载
  32. app.get('/download', function(req, res) {
  33.   res.download('./public/test.xls');
  34. });
  35. // 图片下载
  36. app.get('/download/img', function(req, res) {
  37.   res.download('./public/2.jpg');
  38. });
  39. let port = 9527;
  40. app.listen(port, () => console.log(`端口启动: http://localhost:${port}`));
复制代码
(1):前端文件上传请求
第一种: form表单
  1.   <form action="http://localhost:9527/upload" method="POST" encType="multipart/form-data">
  2.       <input type="file" name="user"/>
  3.       <input type="submit" />
  4.     </form>
复制代码

第一种: input输入框
  1.    <input type="file"  @change="changeHandler($event)"/>
  2.      changeHandler(event) {
  3.       let files  = event.target.files[0];
  4.       console.log("files",files)
  5.       let data = new FormData();
  6.       data.append(files.name,files);
  7.       console.log("data",data)
  8.       axios.post("http://localhost:9527/upload",data,{
  9.         headers:{
  10.           "Content-Type":"multipart/form-data"
  11.         }
  12.       }).then(res =>{
  13.         console.log("res",res)
  14.       })
  15.     },
复制代码

(2):前端文件下载
第一种: 后端返回一个下载的链接地址,前端直接利用 即可
第二种: 利用二进制流文件下载
  1.     <input type="button" value="点击下载" @click="handleDownload">
  2.       handleDownload() {  
  3.     axios({  
  4.       method: 'get',  
  5.       url: "http://localhost:9527/download",  
  6.       data: {   
  7.         test: "test data"  
  8.       },  
  9.       responseType: "arraybuffer" // arraybuffer是js中提供处理二进制的接口
  10.     }).then(response => {         
  11.       // 用返回二进制数据创建一个Blob实例
  12.       if(!response) return;
  13.       let blob = new Blob([response.data], {            
  14.         type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  15.       }) // for .xlsx files         
  16.       // 通过URL.createObjectURL生成文件路径         
  17.       let url = window.URL.createObjectURL(blob)
  18.       console.log("url==========",url)        
  19.       // 创建a标签         
  20.       let ele = document.createElement("a")         
  21.       ele.style.display = 'none'         
  22.       // 设置href属性为文件路径,download属性可以设置文件名称         
  23.       ele.href = url         
  24.       ele.download = this.name         
  25.       // 将a标签添加到页面并模拟点击         
  26.       document.querySelectorAll("body")[0].appendChild(ele)         
  27.       ele.click()         
  28.       // 移除a标签         
  29.       ele.remove()        
  30.     });
  31.   },
复制代码

(3) 附加:二进制流图片的下载
  1.    // 二进制流图片文件的下载
  2.   downLoadImg() {
  3.      axios({
  4.         method: 'get',
  5.         url: `http://localhost:9527/download/img`,
  6.         responseType: 'arraybuffer',
  7.         params: {
  8.           id: 12
  9.         }
  10.       }).then(res => {
  11.         var src = 'data:image/jpg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
  12.        // this.srcImg = src // 图片回显
  13.         var a = document.createElement('a')
  14.         a.href = src
  15.         a.download = '2.jpg'
  16.         a.click()
  17.         a.remove()
  18.       })
  19.     }
复制代码

到此这篇关于前端vue+express实现文件的上传下载示例的文章就先容到这了,更多干系vue express文件上传下载内容请搜刮草根技术分享从前的文章或继承欣赏下面的干系文章希望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作