如何将NextJs中的File docx保存到Prisma ORM

本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
大数据开发治理平台 DataWorks,不限时长
实时计算 Flink 版,5000CU*H 3个月
简介: 在本教程中,你将学习如何在Next.js应用中处理.docx文件上传并利用Prisma ORM存储内容。首先,创建Next.js项目并安装@prisma/client、prisma和multer依赖。接着,配置Prisma ORM,定义`Document`模型,并同步数据库。使用multer处理文件上传API,创建前端上传表单。此外,还介绍了如何使用代理IP进行爬虫数据采集,通过示例展示如何抓取数据并存储到Prisma。这些技巧有助于提升Next.js应用的数据处理和获取能力。

爬虫代理.jpeg

背景/引言

在现代 Web 开发中,Next.js 是一个备受欢迎的 React 框架,它具有许多优点,如:

  • 服务器端渲染 (SSR):Next.js 支持服务器端渲染,可以提高页面加载速度,改善 SEO,并提供更好的用户体验。
  • 静态站点生成 (SSG):Next.js 还支持静态站点生成,使你可以预先生成页面并将其缓存,从而减少服务器负载。
  • 路由系统:Next.js 的路由系统非常灵活,可以轻松处理动态路由和参数。
  • 开发体验:Next.js 提供了热模块替换 (HMR)、TypeScript 支持、自动导入 CSS 等功能,使开发变得更加愉快。

在本文中,我们将探讨如何在 Next.js 应用中处理上传的 Word 文档 (.docx) 文件,并将其内容保存到 Prisma ORM 中。同时,我们还将介绍如何使用爬虫技术,通过代理IP从外部源获取数据。

正文

1. 设置NextJs项目

首先,我们需要创建一个新的NextJs项目,并安装所需的依赖包。

npx create-next-app my-nextjs-app
cd my-nextjs-app
npm install @prisma/client prisma multer

2. 配置Prisma ORM

初始化Prisma,并配置数据模型。

npx prisma init

prisma/schema.prisma文件中,添加一个Document模型:

model Document {
  id        Int      @id @default(autoincrement())
  name      String
  content   Bytes
  createdAt DateTime @default(now())
}

同步数据库:

npx prisma migrate dev --name init

3. 处理文件上传

在NextJs中,使用multer中间件来处理文件上传。创建一个API路由来接收上传的文件。

// pages/api/upload.js
import {
   
    PrismaClient } from '@prisma/client';
import multer from 'multer';

const prisma = new PrismaClient();
const upload = multer();

export const config = {
   
   
  api: {
   
   
    bodyParser: false,
  },
};

const handler = async (req, res) => {
   
   
  upload.single('file')(req, res, async (err) => {
   
   
    if (err) {
   
   
      return res.status(500).send(err.message);
    }

    const {
   
    originalname, buffer } = req.file;

    const document = await prisma.document.create({
   
   
      data: {
   
   
        name: originalname,
        content: buffer,
      },
    });

    res.status(200).json(document);
  });
};

export default handler;

4. 前端文件上传表单

创建一个简单的表单,用于上传docx文件。

// pages/index.js
import {
   
    useState } from 'react';

const Home = () => {
   
   
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
   
   
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
   
   
    e.preventDefault();

    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/api/upload', {
   
   
      method: 'POST',
      body: formData,
    });

    const data = await response.json();
    console.log(data);
  };

  return (
    <form onSubmit={
   
   handleSubmit}>
      <input type="file" onChange={
   
   handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
};

export default Home;

5. 使用爬虫代理IP进行采集

在某些情况下,我们可能需要从外部源获取数据。这里展示如何使用代理IP进行爬虫,使用爬虫代理服务。

// utils/proxyScraper.js
const axios = require('axios');
const {
   
    HttpsProxyAgent } = require('https-proxy-agent');

const proxy = {
   
   
  host: 'your-proxy-host', // 亿牛云爬虫代理的域名 
  port: 'your-proxy-port', // 亿牛云爬虫代理的端口
  auth: {
   
   
    username: 'your-username', // 亿牛云爬虫代理的用户名
    password: 'your-password', // 亿牛云爬虫代理的密码
  },
};

const agent = new HttpsProxyAgent(`http://${
     
     proxy.auth.username}:${
     
     proxy.auth.password}@${
     
     proxy.host}:${
     
     proxy.port}`);

const fetchData = async (url) => {
   
   
  try {
   
   
    const response = await axios.get(url, {
   
   
      httpsAgent: agent,
    });
    return response.data;
  } catch (error) {
   
   
    console.error('Error fetching data:', error);
    throw error;
  }
};

module.exports = fetchData;

6. 示例爬取数据并存储到Prisma

示例代码展示如何使用上述代理IP配置,从外部源爬取数据,并将其存储到Prisma ORM中。

// pages/api/scrape.js
import {
   
    PrismaClient } from '@prisma/client';
import fetchData from '../../utils/proxyScraper';

const prisma = new PrismaClient();

const handler = async (req, res) => {
   
   
  try {
   
   
    const data = await fetchData('https://example.com/data-source');

    const document = await prisma.document.create({
   
   
      data: {
   
   
        name: 'Scraped Data',
        content: Buffer.from(data),
      },
    });

    res.status(200).json(document);
  } catch (error) {
   
   
    res.status(500).json({
   
    error: 'Failed to fetch and save data' });
  }
};

export default handler;

结论

本文介绍了如何在NextJs中处理docx文件上传,并将其存储到Prisma ORM中。同时,展示了如何使用爬虫代理进行采集,并将爬取到的数据存储到数据库中。通过这些示例代码,开发者可以更好地理解文件处理和数据存储的流程,并灵活应用代理IP技术来扩展数据获取能力。

相关文章
|
2月前
|
JavaScript 前端开发
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
|
2月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
848 0
|
存储 Java Linux
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
2145 0
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
|
27天前
|
数据采集 缓存 前端开发
如何将NextJs中的File docx保存到Prisma ORM
如何将NextJs中的File docx保存到Prisma ORM
16 3
|
2月前
|
JavaScript
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
|
2月前
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
2月前
|
XML Go 数据格式
Go如何自动解压缩包?如何读取docx/doc文件内容?
在开发过程中,我们常常需要处理压缩包和文档文件。本文将介绍如何使用Go语言自动解压缩包和读取docx/doc文件。
|
7月前
|
小程序 Shell PHP
laravel5.8(二十三)导出PDF
有需求需要使用PHP导出pdf。下面记录一下我使用的两种方式 一:laravel-tcpdf 导出PDF文件Laravel框架为我们集成了一个插件tcpdf。 下载地址: github.com/elibyy/tcpd… 然后使用composer进行安装就可以了。 具体安装过程,请移步《laravel5.8(十)引入第三方类库》 使用的时候记得use 一下 命名空间。 但是这里有一个问题,使用这个插件导出文件无法使用中文,且我还没有找到解决办法,因此,这个laravel的tcpdf插件我就没有使用。 二:tcpdf tcpdf官方网站: tcpdf.org/ 我下载了完整版的TCPDF 下载地址
64 0
|
JavaScript 前端开发 Java
SpringBoot+Vue+kkFileView实现txt、doc、docx、md等文件在线预览)
SpringBoot+Vue+kkFileView实现txt、doc、docx、md等文件在线预览)
|
前端开发
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )
docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word
1026 0
前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )