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

简单350

新建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. 
   
8. var app = express();
   
9. app.use(express.json());
   
10. app.use(express.urlencoded({ extended: true }));
    
11. // 前端解决跨域问题
    
12. app.all("*", (req, res, next) => {
    
13.   res.header("Access-Control-Allow-Origin", "*");
    
14.   next();
    
15. });
    
16. // 访问静态资源
    
17. app.use(express.static(path.join(__dirname)));
    
18. 
    
19. // 文件上传
    
20. app.post("/upload", multer({ dest: "./public" }).any(), (req, res) => {
    
21.   const { fieldname, originalname } = req.files[0];
    
22.   // 创建一个新路径
    
23.   const name = fieldname.slice(0, fieldname.indexOf("."));
    
24.   const newName = "public/" + name + path.parse(originalname).ext;
    
25.   fs.rename(req.files[0].path, newName, function (err) {
    
26.     if (err) {
    
27.       res.send({ code: 0, msg: "上传失败", data: [] });
    
28.     } else {
    
29.       res.send({ code: 1, msg: "上传成功", data: newName });
    
30.     }
    
31.   });
    
32. });
    
33. // 文件下载
    
34. app.get('/download', function(req, res) {
    
35.   res.download('./public/test.xls');
    
36. });
    
37. 
    
38. // 图片下载
    
39. app.get('/download/img', function(req, res) {
    
40.   res.download('./public/2.jpg');
    
41. });
    
42. 
    
43. let port = 9527;
    
44. 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文件上传下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！