node.js接口与前端页面

interface.js

var express = require('express');
var mysql      = require('mysql');

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'test',
    connectTimeout:36000000
  });

  connection.connect();

  var app = express();
  var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

app.get('/list', function (req, res) {
  res.header("Access-Control-Allow-Origin", "*");
    connection.query('SELECT*from info', function (error, results, fields) {
        if (error) throw error;
        res.send(results);
      });
})


app.get('/add', function (req, res) {
    let sqlstr="insert into info(name,amount) values(?,?)";
    let sqlparam=[req.query.name,req.query.amount];
    connection.query(sqlstr,sqlparam, function (error, results, fields) {
        if (error) throw error;
        res.send(results);
      });
})

app.get('/update', function (req, res) {
    let sqlstr="update info set name=?,amount=? where id=?";
    let sqlparam=[req.query.name,req.query.amount,req.query.id];
    connection.query(sqlstr,sqlparam, function (error, results, fields) {
        if (error) throw error;
        res.send(results);
      });
})

app.get('/del', function (req, res) {
    let sqlstr="delete from info where id=?";
    let sqlparam=[req.query.id];
    connection.query(sqlstr,sqlparam, function (error, results, fields) {
        if (error) throw error;
        res.send(results);
      });
})
<template>
	<view class="content">
		<view id="topBar">
			<view id="top-bar-left&
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js 分片上传和 Vue 前端可以结合使用,实现大文件的上传功能。下面是一个简单的实现思路: 1. 前端使用 Vue 框架搭建上传页面,并调用 Node.js 后端接口实现文件上传; 2. 前端使用 JavaScript 读取需要上传的文件,并将文件进行分片; 3. 前端将分片后的文件逐一上传至 Node.js 后端接口; 4. Node.js 后端接口接收到文件分片后,将文件分片保存至本地; 5. 当所有分片上传完成后,Node.js 后端接口将所有分片合并成一个完整的文件。 下面是一个简单的代码示例: Vue 前端代码: ```html <template> <div> <input type="file" @change="onSelectFile" /> <button @click="onUploadFile">上传</button> </div> </template> <script> export default { data() { return { file: null, chunkSize: 1024 * 1024, // 分片大小,单位为字节 }; }, methods: { onSelectFile(event) { this.file = event.target.files[0]; }, onUploadFile() { const fileReader = new FileReader(); fileReader.readAsArrayBuffer(this.file); fileReader.onload = (event) => { const arrayBuffer = event.target.result; const chunks = this.splitFile(arrayBuffer); chunks.forEach((chunk, index) => { this.uploadChunk(chunk, index); }); }; }, splitFile(arrayBuffer) { const fileSize = arrayBuffer.byteLength; const chunks = []; let offset = 0; while (offset < fileSize) { const chunk = arrayBuffer.slice(offset, offset + this.chunkSize); chunks.push(chunk); offset += this.chunkSize; } return chunks; }, async uploadChunk(chunk, index) { const formData = new FormData(); formData.append('file', chunk); formData.append('index', index); await this.$axios.post('/upload/chunk', formData); }, }, }; </script> ``` Node.js 后端代码: ```javascript const express = require('express'); const multer = require('multer'); const fs = require('fs'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload/chunk', upload.single('file'), (req, res) => { const { file, index } = req; const fileName = file.originalname; const filePath = `./uploads/${fileName}.${index}`; const fileStream = fs.createWriteStream(filePath); fileStream.on('error', (error) => { console.log(error); res.status(500).send(error); }); fileStream.on('finish', () => { res.send('ok'); }); fileStream.write(file.buffer); fileStream.end(); }); app.post('/upload/merge', (req, res) => { const { fileName } = req.body; const filePaths = fs.readdirSync('./uploads') .filter((fileName) => fileName.startsWith(`${fileName}.`)) .sort() .map((fileName) => `./uploads/${fileName}`); const fileStream = fs.createWriteStream(`./uploads/${fileName}`); filePaths.forEach((filePath) => { const chunkStream = fs.createReadStream(filePath); chunkStream.pipe(fileStream, { end: false }); chunkStream.on('end', () => { fs.unlinkSync(filePath); }); }); fileStream.on('finish', () => { res.send('ok'); }); fileStream.end(); }); app.listen(3000, () => { console.log('Server started on port 3000.'); }); ``` 上述代码中,前端通过 `splitFile` 方法将文件分成多个分片,并通过 `uploadChunk` 方法逐个上传至 Node.js 后端。后端通过 Multer 中间件接收上传的文件分片,并将文件分片保存至本地。当所有分片上传完成后,前端调用后端的 `/upload/merge` 接口,后端将所有分片合并成一个完整的文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值