vue3+threejs+koa可视化项目——模型文件上传(第四步)

2024-02-04 20:36
文章标签 javascript 项目 可视化 模型 vue vue3 koa frontend 上传 threejs 第四步

本文主要是介绍vue3+threejs+koa可视化项目——模型文件上传(第四步)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • ⭐前言
      • 💖往期node系列文章
      • 💖threejs系列相关文章
      • 💖vue3+threejs系列
    • ⭐koa后端文件上传(koa-body)
      • 💖自动创建目录
      • 💖自定义目录上传
      • 💖apifox自测上传接口
    • ⭐vue3前端上传模型文件
      • 💖 axios 接口上传
      • 💖 使用 ant design vue 上传
    • ⭐总结
      • 💖 后端koa
      • 💖 前端vue3
    • ⭐结束

yma16-logo

⭐前言

大家好，我是yma16，本文分享关于 vue3+threejs+koa可视化项目——模型文件上传(第四步)。

multipart切片上传
multipart content type 是指一种HTTP报文中的Content-Type的类型，它可以将一个HTTP请求或响应分为多个部分，每个部分可以有自己的Content-Type和内容。这种类型的报文通常用于传输多个文件或者消息体，每个部分可以有不同的编码方式和内容类型，比如图片、文本等不同的数据类型。

💖往期node系列文章

node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置
node笔记_http服务搭建（渲染html、json）
node笔记_读文件
node笔记_写文件
node笔记_连接mysql实现crud
node笔记_formidable实现前后端联调的文件上传
node笔记_koa框架介绍
node_koa路由
node_生成目录
node_读写excel
node笔记_读取目录的文件
node笔记——调用免费qq的smtp发送html格式邮箱
node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）
node实战——后端koa结合jwt连接mysql实现权限登录（node后端就业储备知识）
node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）
node实战——koa实现文件下载和图片/pdf/视频预览（node后端储备知识）

💖threejs系列相关文章

THREE实战1_代码重构点、线、面
THREE实战2_正交投影相机与透视相机
THREE实战3_理解光源
THREE实战4_3D纹理
THREE实战5_canvans纹理
THREE实战6_加载fbx模型

💖vue3+threejs系列

vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）
vue3+threejs+koa可视化项目——实现登录注册（第三步）

⭐koa后端文件上传(koa-body)

node 安装 koa-body

npm install koa-body

由于之前的博客是实现使用koa-bodyparser
需要卸载npm uninstall koa-bodyparser
引入koa-body

// 文件上传
app.use(koaBody({multipart: true
}))

💖自动创建目录

封装创建目录dirExists（不存在则创建）

const fs = require('fs');
const path = require('path');/*** 读取路径信息* @param {string} path 路径*/
function getStat(path) {return new Promise((resolve, reject) => {fs.stat(path, (err, stats) => {if (err) {resolve(false);} else {resolve(stats);}})})
}/*** 创建路径* @param {string} dir 路径*/
function mkdir(dir) {return new Promise((resolve, reject) => {fs.mkdir(dir, err => {if (err) {resolve(false);} else {resolve(true);}})})
}/*** 路径是否存在，不存在则创建* @param {string} dir 路径*/
async function dirExists(dir) {let isExists = await getStat(dir);//路径存在是目录if (isExists && isExists.isDirectory()) {return true;} else if (isExists) {// 文件return false;}//拿到上级路径let tempDir = path.parse(dir).dir;//递归判断，如果上级目录也不存在，则会代码会在此处继续循环执行，直到目录存在let status = await dirExists(tempDir);let mkdirStatus;if (status) {mkdirStatus = await mkdir(dir);}return mkdirStatus;
}module.exports={dirExists
}

💖自定义目录上传

实现文件上传

const {dirExists} =require("../../utils/createDir");const Router = require('koa-router');
const router = new Router();
const fs=require('fs')// 当前时间
const  getCurrentTime=() =>{const now = new Date()return `${now.valueOf()}`
};// upload file
router.post('/upload/file', async (ctx) => {try{// 获取上传的文件const file = ctx.request.files.files;console.log('file',file)const dir='./db/file/'+getCurrentTime()await dirExists(dir);const file_path=`${dir}/${file.originalFilename}`;console.log('file_path',file_path)// 创建可读流const reader = fs.createReadStream(file._writeStream.path);// 创建可写流const upStream = fs.createWriteStream(file_path);// 可读流通过管道写入可写流reader.pipe(upStream);ctx.body={'code':200,msg:'上传成功！'}}catch(e){ctx.body = {code: 0,data:e,msg: 'upload media fail'};}
});module.exports=router;

💖apifox自测上传接口

上传一张图片
upload-apifox

上传成功！
upload-success

⭐vue3前端上传模型文件

💖 axios 接口上传

http封装 上传配置content-type和token

// 实例
const createUploadInstance = (baseURL:string)=>{//tokenconst token = localStorage.getItem("userInfoPermissionToken")const Authorization = `bearer ${token}`return axios.create({baseURL:baseURL,timeout: 1000000,headers: {"Content-Type": "multipart/form-data",Authorization}})
};// @ts-ignore
const uploadHttp:any=createUploadInstance('');

上传接口

// @ts-ignore
import {uploadHttp} from "@/http/index";
export const uploadFile: any = (params: any) => {return uploadHttp.post("/api/upload/file", params);
};

💖 使用 ant design vue 上传

上传页面

<template>
<div><div>选择模型</div><a-upload-draggername="file":multiple="false":file-list="state.fileList":before-upload="beforeUpload"@remove="handleRemove"><p class="ant-upload-drag-icon"><inbox-outlined></inbox-outlined></p><p class="ant-upload-text">点击获取拖拽选择文件上传</p></a-upload-dragger><div style="margin-top: 20px;"><a-button type="primary" @click="handleUpload">上传</a-button></div>
</div>
</template>
<script lang="ts" setup>import { reactive } from 'vue';import { InboxOutlined } from '@ant-design/icons-vue';import { message } from 'ant-design-vue';import {uploadFile} from '@/service/upload/index'const state:any=reactive({loading:false,fileList:[]})const beforeUpload=(file:File)=>{state.fileList=[file]return false;}const handleRemove = (file) => {state.fileList=[]};const handleUpload = async () => {if(!state.fileList.length){return message.warn('请选择文件')}const formData = new FormData();state.fileList.forEach((file: any) => {formData.append('file', file as any);});state.loading = true;try{const res=await uploadFile(formData)console.log('res',res)}catch (e) {message.error(JSON.stringify(e))}};</script>

上传成功！
upload-vue3
上传iron_man模型文件成功！
upload-success

⭐总结

💖 后端koa

koa-body使用
koa-body是一个koa中间件，用于解析HTTP请求的body内容。它支持多种类型的body内容，包括json、form、text、multipart等。

使用koa-body的步骤如下：

  1. 安装koa-body模块：可以使用npm或者yarn进行安装。

    npm install koa-body

  2. 引入koa-body模块：在koa的代码文件中，使用require语句引入koa-body。

    const koaBody = require('koa-body');

  3. 注册koa-body中间件：在koa的代码文件中，使用app.use方法来注册koa-body中间件。

    app.use(koaBody());

    可以在传递koa-body的参数中指定解析body的类型和其他配置。例如，可以指定multipart的配置项如下：

    app.use(koaBody({multipart: true,formidable: {uploadDir: './uploads',keepExtensions: true,maxFileSize: 200 * 1024 * 1024}
}));

    上述代码指定了将multipart类型的body解析为文件上传，并保存在"./uploads"目录下，同时限制了上传文件的大小为200MB。

  4. 在koa的路由处理函数中使用解析后的body内容：koa-body中间件会将解析后的body内容保存在ctx.request.body属性中，可以在koa的路由处理函数中通过ctx.request.body来使用解析后的body内容。

    router.post('/', async (ctx) => {const requestBody = ctx.request.body;// ...
});

可以根据具体的需求配置koa-body中间件，具体的配置项可以参考koa-body的文档。

💖 前端vue3

http封装
Axios是一个基于Promise的HTTP客户端库，可以用于浏览器和Node.js。它提供了一种简单、直观的方式来发送HTTP请求和处理响应。

为了更好地使用和管理Axios，可以对其进行封装。封装Axios可以使代码更加简洁、易于维护，并提供一些常用的功能，如错误处理、拦截请求和响应等。

以下是一个简单的Axios封装示例：

import axios from 'axios';// 创建一个Axios实例
const instance = axios.create({baseURL: 'http://api.example.com', // 设置请求的基础URLtimeout: 5000 // 设置请求超时时间
});// 请求拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response => {// 对响应数据做些什么return response.data;},error => {// 对响应错误做些什么return Promise.reject(error);}
);export default instance;

在封装的Axios实例中，可以设置一些通用的配置，如基础URL和超时时间。还可以通过请求拦截器在发送请求之前做一些操作，如添加请求头，对请求参数进行处理等。类似地，通过响应拦截器可以对响应数据进行处理，如统一处理错误，转换响应数据等。

封装后的Axios实例可以通过导入的方式在其他地方使用，简化了代码的编写和维护。可以根据实际需求，进一步封装一些通用的API请求方法，以便在项目中重复使用。

总之，封装Axios可以提高开发效率，增强代码的可读性和可维护性，并提供一些常用的功能。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

robot

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 最后，感谢你的阅读！

这篇关于vue3+threejs+koa可视化项目——模型文件上传(第四步)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/678728。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2