前端、后端node.js文件上传下载

已于 2024-01-11 15:39:33 修改
阅读量1.4k 收藏 4
点赞数 1
分类专栏： node.js 文章标签： node.js 前端 javascript
于 2021-12-02 19:49:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CongJiYong/article/details/121684908
版权

前端实现文件上传

    <body>
		<!-- 没有设置多选，只能选择一个文件 -->
		<input type="file" id="file"/>
	</body>
	<script>
		// 获取文件选择控件
		var file = document.getElementById('file');
		// 为文件选择控件添加onchanges事件
		// 在用户文件选择时触发
		file.onchange = function(){
			// 创建空的formData
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName',this.files[0]);
			//	this.files[0] this指向file,用户选择的文件
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			// 只有post方法能实现文件上传
			xhr.open('post','http://localhost:3000/upload')
			// 把文件发送到服务端 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function(){
				// 如果服务器端返回的http状态码为200 请求成功
				if(xhr.status == 200){
					// 将服务器端返回的数据显示在控制台中
					console.log(xhr.responseText);
				}else{
					console.log("上传失败，出错了")
				}
			}
		}
		
	</script>

demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="file" />
  </body>
  <script>
    // 获取文件选择控件
    var file = document.getElementById('file')
    // 为文件选择控件添加onchanges事件
    // 在用户文件选择时触发
    file.onchange = function () {
      // 创建空的formData
      var formData = new FormData()
      // 将用户选择的文件追加到formData表单对象中
      formData.append('file_upload', this.files[0])
      //	this.files[0] this指向file,用户选择的文件
      // 创建ajax对象
      var xhr = new XMLHttpRequest()
      // 对ajax对象进行配置
      // 只有post方法能实现文件上传
      xhr.open('post', 'http://192.168.1.222:90/x86/system_file_settings/')
      xhr.setRequestHeader(
        'Authorization',
        'token eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwibmFtZSI6InVzZXIifQ.gRG1xnin3_zhRCWgGXEmo5JtB7mctN50Jvht37CeNqI'
      )
      // 把文件发送到服务端 发送ajax请求
      xhr.send(formData)
      // 监听服务器端响应给客户端的数据
      xhr.onload = function () {
        // 如果服务器端返回的http状态码为200 请求成功
        if (xhr.status == 200) {
          // 将服务器端返回的数据显示在控制台中
          console.log(xhr.responseText)
        } else {
          console.log('上传失败，出错了')
        }
      }
    }
  </script>
</html>

上传文件进度条显示

<body>
		<!-- 没有设置多选，只能选择一个文件 -->
		<input type="file" id="file"/>
		<div class="progress">
			<div class="progress-bar" style="width:70%" id="bar">70%</div>
			
		</div>
	</body>
	<script>
		// 获取文件选择控件
		var file = document.getElementById('file');
		var bar = document.getElementById('bar');

		// 为文件选择控件添加onchanges事件
		// 在用户文件选择时触发
		file.onchange = function(){
			// 创建空的formData
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName',this.files[0]);
			//	this.files[0] this指向file,用户选择的文件
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			// 只有post方法能实现文件上传
			xhr.open('post','http://localhost:4040/upload');
			// onprogress在文件上传的过程中持续触发
			xhr.upload.onprogress = function(ev){
				// ev.loaded 文件已经上传了多少
				// ev.total  上传文件的问大小
				var result = (ev.loaded / ev.total) * 100 + '%';
				// 设置进度条的宽度
				bar.style.width = result;
				// 将百分比显示在进度条中
				bar.innerHTML = result;
				console.log(ev);
			}
			
			// 把文件发送到服务端 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function(){
				// 如果服务器端返回的http状态码为200 请求成功
				if(xhr.status == 200){
					// 将服务器端返回的数据显示在控制台中
					console.log(xhr.responseText);
					console.log('成功')
				}else{
					console.log("上传失败，出错了")
				}
			}
		}
		
	</script>

elementui 文件上传

 <el-form-item :label='itemLabel'>
            <template slot='label'>
              <i class='el-icon-help'></i>
              {{itemLabel}}
            </template>
            <el-upload
              ref='upload'
              class='upload-demo'
              :accept='accept'
              :action='action'
              :on-preview='handlePreview'
              :on-remove='handleRemove'
              :before-remove='beforeRemove'
              :on-success='successPreview'
              :headers='token'   //绑定token
              :show-file-list='true'
              :limit='1'
              :on-exceed='handleExceed'
              :auto-upload='false'
              :http-request='myUploadFile'
              name='file_upload'
              :file-list='fileList'>
              <el-button slot='trigger' size='small' type='success'><i class='el-icon-plus'></i>&nbsp;选择文件</el-button>
              <el-button style='margin-left: 10px;' size='small' type='primary' @click='submitUpload'><i class='el-icon-upload'></i>&nbsp;上传文件
              </el-button>
              <slot name='download'></slot>
              <el-button size='small' type='warning' v-if='ifConfig' @click='download'><i class='el-icon-download'></i>&nbsp;导出配置</el-button>
              <slot name='center'></slot>
              <!--      <div slot='tip' class='el-upload__tip'>只能上传压缩文件</div>-->
            </el-upload>
          </el-form-item>




 async myUploadFile(data) {
       let file = data.file
       if (this.type === 'image_btn') {
         let formData = new FormData()
         formData.append('img_upload', file)
         uploadImageAPI(formData).then(res => {

           if (res.data.message !== '上传成功') {
             // alert("上传失败")
             this.$confirm('', res.data.errorMes, {
               confirmButtonText: '确定',
               type: 'error',
               showCancelButton: false,
               closeOnClickModal: false,
               center: true
             })
           } else {
             this.fileList = []
             this.$confirm('', res.data.message, {
               confirmButtonText: '确定',
               type: 'success',
               showCancelButton: false,
               closeOnClickModal: false,
               center: true
             })

           }

         }).catch(() => {
           loading.close()
           // this.submitLoading = false;
         })
         // this.action = 'http://192.168.1.222:90/x86/img_upload/'
       }

前端实现下载文件

  1. 调用接口设置responseType类型为blob
export const uploadAudioVideofiles = (data) => {
  return request.get(`/x86/get_audio_and_video_files/`,{params:data,responseType:'blob'})
}

2.获取后端返回的文件名,拿到请求头（content-disposition）的值

 const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1])

download() {
	      getSystemConfig().then(res => { //后端返回的res
	        const link = document.createElement('a')
	        let blob = new Blob([res.data], { type: 'application/zip' }) //类型
	        link.style.display = 'none'
	        link.href = URL.createObjectURL(blob)
	        link.setAttribute('download', 'data_config')  //data_config为下载的文件名    
	        document.body.appendChild(link)
	        link.click()
	        document.body.removeChild(link)
	        this.$message.success('导出配置')
	
	      })

  },
// 将blob转换为url
 getURL(file) {
  let url = null;
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(file);
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    try {
      url = window.webkitURL.createObjectURL(file);
    } catch (error) { }
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    try {
      url = window.URL.createObjectURL(file);
    } catch (error) { }
  }
  return url;
}

直接用的方法

  download(res) {
        const link = document.createElement('a')
        const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1])
        let name = fileName.replace(/"/g, '');
        let new_name = name.split('.')
        let end_type = new_name[new_name.length-1]
      //   if(end_type.startsWith("mp3")){
      //     var blob = new Blob([data], { type: 'application/mp3' })
      //   }else if (end_type.startsWith("mp4")){
      //     var blob = new Blob([data], { type: 'application/mp4' })
      //   }
        var blob = new Blob([res.data], { type: `application/${end_type}` })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', name)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    },
    //等待所有文件下载完成
     const promises = this.selections.map(item => {
         return new Promise((resolve, reject) => {
           uploadAudioVideofiles({
             "file_path": item.targetPath
           }).then((res) => {
             this.download(res)
             resolve(); // 成功时解析 Promise
           }).catch(error => {
             reject(error); // 失败时拒绝 Promise
           });
         });
       });
       try {
         await Promise.all(promises);
         this.$message.success("下载完成");
       } catch (error) {
         console.error(error);
         this.$message.error("下载失败");
       }

node.js后端实现文件上传

方法一

const experss = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');
const app = experss();
app.listen(3000, () => {
    console.log(`web服务器工作在3000端口`);
});
//文件上传界面：
app.get('/uploads', (req, res) => {
    res.sendFile(path.join(__dirname, 'users.html'));
});
//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
    let filePath = path.join(__dirname, 'uploads');
    //判断目录或文件是否存在：
    if (!fs.existsSync(filePath)) { //目录不存在时
        fs.mkdirSync(filePath); //创建目录
    }
    //uploadDir:设置文件上传成功后的存放位置
    //初始化
    const form = formidable({ multiples: true, uploadDir: filePath });
    // console.log(form, 333);

    form.parse(req, (err, fields, files) => {
        // console.log(err, fields, files, 111);
        if (err) { //表单处理失败
            res.send('表单处理失败');
        } else { //表单处理成功 
            //获取用户选择的要上传文件的文件名:
            let ufilename = files.pic.originalFilename;
            //获取用户选择的要上传文件的文件扩展名：
            let extNames = path.extname(ufilename);
            // console.log(extNames, 666);
            //使用自已生成新随机文件名:  完整文件名=文件名.扩展名
            //  form表单要设置成enctype="multipart/form-data",pic是文件上传input type="file"的name
            let fullname = `${files.pic.newFilename}${extNames}`
            console.log(fullname);
            //将上传成功后生成的临时文件名改为正式文件名
            fs.renameSync(files.pic.filepath, `${filePath}/${fullname}`);
            res.send('OK')
        }
    });


});

方法二


```javascript
app.post('/upload',(req,res)=>{
	//创建formidable表单解析对象
	const form = new formidadle.IncomingForm();
	//设置客户端上传文件的存储路径
	form.uploadDir = path.join(__dirname,'public','uploads');
	//保留上传文件的后缀名字
	form.keepExtensions = true;
	//解析客户端传递过来的FormData对象
	form.parse(req,(err,fields,files)=>{
		res.send('ok');
	}) 
})
CongJiYong
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nodejs实现文件上传下载
weixin_44806363的博客
04-18 2651
一、文件下载 前端：使用a标签请求要下载的文件内容 <a herf="/下载路径" download>下载</a> 后端： var fs = require("fs") var http = require("http") var ht = fs.readFileSync("./static/html/load.html") var server = http.createServer((req,res)=>{ if(req.method=="GET" &&
nodejs文件下载及上传
ts_shinian_web
09-24 2354
文件下载有很多种方式，我们下面看一下。
【Nodejs】文件上传
DomCode
07-26 956
在目录下创建const uploadAvatar = require('../multer/upload') // 用户的逻辑控制器 const UserController = {// 头像图片上传 async upload(req , res) {try {meta : {code : 200 , msg : '上传成功！上述代码主要是编写了一个用户控制器类，以及一个图片上传的方法upload。在upload中调用了上传图片的接口，得到成功或失败的结果，在响应给客户端。// 导入用户逻辑。
前端使用原生JS怎么上传本地路径的文件到后端【附源码】
最新发布
无法自律的人的博客
05-14 827
根据前端文本的本地路径地址进行文件上传后端
node的express框架中使用Multer实现文件上传功能
jieyucx的博客
08-02 1311
/ req.file 是 'myfile' 文件 的信息 // req.body 将具有文本域数据，如果存在的话 res . send('文件上传成功！');})这个路由中的upload.single(‘myfile’), 'myfile’是我们在前端form表单中定义的name值，对应的文件的file对象添加到了req。file属性中。upload.single的作用是处理前端传过来的name为’myfile’的单个文件。而req.body属性则包含了非文件的表单数据。req.file对象。
Node.js实现下载文件
二木成林
12-14 1万+
node.js文件下载
node js 实现文件上传 下载 删除一整套，包含校验创建文件夹 直接粘贴使用完全没问题
sinat_39327967的博客
11-17 395
使用 nodejs 进行 post请求 上传文件 下载文件 删除文件 功能 废话少说 直接上代码 cp就能使用。到这里就完成啦 如果有同学或打工人有不明白的地方 可以提问我哦。
node 文件上传
qq_42451776的博客
08-26 617
文章目录后端前端直接使用 from表单提交使用Ajax 模拟表单提交 后端 router.js const express = require('express'); const ceshi = express.Router() //创建路由 const multer = require('multer'); // 不要将 这个作为全局中间件 而是只在需要的路由上使用 // 单名称单文件上传 single // 单名城多文件 array // 多名称多文件 fields
nodejs+express实现文件上传下载管理网站
10-20
主要为大家详细介绍了nodejs+express实现文件上传下载管理的网站，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在node.js下浅谈文件上传的方法
CODING
06-28 2232
这是接着上篇文章的下部分，关于文件上传的方法。相对下载，前端部分复杂了不少，接下来就谈谈上传的问题。
nodejs之文件下载
代码解释生活
03-08 2万+
==========request模块实现下载========***********app.js*************var express = require('express'); var app = express();//创建express实例 var routes=require('./routes/routes.js');//吧路由引入； ./ 代表项目的当前总目录 /Users...
nodejs+mongodb实现简单的上传文件页面
01-11
用nodejs建立了简单的页面，并且连接mongdb数据库，可以实现简单的页面
从前端到后端实现文件上传
热门推荐
qq_36651625的博客
08-06 2万+
看了很多关于文件上传的帖子，感觉写的都很复杂，于是做了一个总结，写个精简版，希望对大家有所帮助。 前端选用&lt;input type="file"&gt;原生组件，实现该组件美化与图片预览功能。 前端代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &a
nodejs实现文件下载功能，防止文本TXT类文件直接打开
u013992330的博客
10-25 8398
  当直接访问的某个文件时，如果该文件是二进制等浏览器无法解析的文件，浏览器才会下载该文件，但如果浏览器可以自己解析该文件，则它会打开该文件并以自己的方式呈现出来，而不会下载，此时就需要设置消息响应头，告诉浏览器该文件需要下载而不是简单的打开。 实现方法如下，访问：http://localhost:3000/download?fileType=1&amp;fileName=test.txt ...
nodejs上传文件和下载文件到本地（二）——下载文件到本地篇
CSDN_xiaoxiaocainiao的博客
04-25 6482
上次讲完了上传的部分，今天来说说下载的部分，下载可是坑了我不少，下载的文件名一直是中文乱码，内容倒是很正常。 包的管理还是用一个表格来呈现，把上一个包管理的删除按钮功能换成下载功能即可 文件下载和上传不同，不需要传路径地址什么的，其实请求都可以很随意，如果不是为了区分是什么文件，在前段页面只需要做一件事发一个请求，只需要简单的一句话就行 function downloadPackage(p...
nodejs中的表单文件上传
weixin_44670326的博客
09-01 539
nodejs表单提交上传加粗样式** 1 nodejs中表单默认请求方式： Content-Type：application/x-www-form-urlencoded 特点是：会通过&连接，是不能实现文件上传， 2 表单post上传文件请求类型：enctype = “multipart/form-data” 可以实现表单的文件上传。 文件上传原理： 将表单设置 enctype =...
node.js实现上传与下载文件
weixin_34236869的博客
11-27 986
需求 最近在项目中遇到这样一个需求：上传和下载文件。具体情景如下： A上传一份任务文件（文件类型不限）到网站上，B看到后下载文件，按照文件里的要求完成任务之后，B要把任务完成情况汇总到一个Excel文档中，上传到网站上（此时只能上传xls格式的excel文档），然后网站在后台对这份Excel文档的数据进行处理，生成一份新的Excel文档。...
nodejs 模拟form表单上传文件
weixin_30662849的博客
07-08 415
使用nodejs来模拟form表单进行文件上传，可以同时上传多个文件。 以前项目里有这个方法，最近在客户那里出问题了，同事说，这个方法从来就没管用过，SO，用了一天时间把这个方法给搞出来了（觉得花费的时间长了点），分享之。 代码及测试用例： var http = require('http'); var path = require('path'); var fs = require('fs');...
Node实现文件（图片、音/视频等）上传
自酌一杯酒
12-02 1964
node文件上传完整代码。使用 multer 中间件 来储存上传的文件，支持自定义保存到哪个文件目录下
nodejs实现文件上传保存在本地
m0_52320512的博客
05-31 1976
2、接下来我们就要写一个上传文件的表单了，在根目录新建一个html文件夹，里面建一个mypage.html文件，写入以下代码。1、首先新建一个文件夹 fileUpload ,在vscode打开，根目录新建一个index.js文件，写入以下代码，启动。在项目终端运行nom install multer安装multer模块，然后运行node ./index.js。就一个index.js和一个mypage.html。接下来运行项目，在浏览器上传文件后，相应的uploads文件夹就会保存对应的文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CongJiYong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值