Vue + Node.js 构建 "文件上传 "管理后台
本文完整版《Vue + Node.js 搭建「文件上传」管理后台》
本教程手把手带领大家搭建一套通过 Vue + Node.js 上传文件的后台系统,只要你跟随本教程一步步走,一定能很好的理解整个前后端上传文件的代码逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传文件应用,后端我们使用 Node.js + Express + Multer 来搭建后端上传文件处理应用。
当然,本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。
最后完成的上传文件工具后台如下图,跟随本教学习,你也可以搭出来。
如果你对前端不是很熟悉,不想写前端,推荐使用卡拉云搭建后台管理系统,卡拉云是新一代低代码开发工具,不用懂任何前端技术,仅靠鼠标拖拽,即可快速搭建包括「上传文件」在内的任何后台管理工具。立即试用卡拉云 1 分钟搭建「文件上传」工具。详情见本文文末。
Vue + Node.js「上传文件」前后端项目结构
Vue 前端部分
- UploadFilesService.js:这个脚本调用通过 Axios 保存文件和获取文件的方法
- UploadFiles.vue:这个组件包含所有上传文件相关的信息和操作
- App.vue:把我们的组件导入到 Vue 起始页
- index.html:用于导入 Bootstrap
- http-common.js:配置并初始化 Axios
- vue.config.js:配置 APP 端口
Node.js 后端部分
- resources/static/assets/uploads:用于存储上传的文件
- middleware/upload.js:初始化 Multer 引擎并定义中间件
- file.controller.js:配置 Rest API
- routes/index.js:路由,定义前端请求后端如何执行
- server.js:运行Node.js Express 应用
✦ 前端部分 - 上传文件 Vue + Axios + Multipart
配置 Vue 环境
使用 npm 安装 Vue 脚手架 vue-cli
npm install -g @vue/cli
然后我们创建一个 Vue 项目 kalacloud-vue-multiple-files-upload
vue create kalacloud-vue-multiple-files-upload
安装完成后,cd 进入 kalacloud-vue-multiple-files-upload 目录,接下来所有操作都在这个目录之下。
安装 Axios:
npm install axios
我们先跑一下 Vue ,这是 vue 的默认状态
npm run serve
我们可以看到浏览器里 Vue 已经在 localhost:8080 跑起来了。
扩展阅读:《Vue 搭建带预览的「上传图片」管理后台》
导入 Bootstrap 到项目中
打开 index.html 把以下代码添加到<head>
中:
文件位置:public/index.html
<!DOCTYPE html>
<html lang="en"><head>
...
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
...
</html>
初始化 Axios HTTP 客户端
在 src 文件夹下,创建 http-common.js 文件,如下所示:
文件位置:src/http-common.js
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:8080",
headers: {
"Content-type": "application/json"
}
});
这里的 baseURL
是你上传文件的后端服务器 REST API 地址,请根据实际情况修改。本教程后文,教你搭建上传文件的后端部分,请继续阅读。
创建「上传文件」功能
我们来写一个 JS 脚本,这个脚本调用 Axios 发送 HTTP API 请求,与后端服务器通讯。
这个脚本包含 2 个功能
-
upload(file)
: POST 数据到后端,再加一个上传进度的回调,可以放个上传进度条。 -
getFiles()
: 用于获取服务器上传文件夹中的文件列表
文件位置:src/services/UploadFilesService.js
import http from "../http-common";
class UploadFilesService {
upload(file, onUploadProgress) {
let formData = new FormData();
formData.append("file", file);
return http.post("/upload", formData, {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress});
}
getFiles() {
return http.get("/files");
}
}
export default new UploadFilesService();
- 首先导入我们刚刚写好的 Axios HTTP 配置文件 http-common.js
-
FormData
是一种可将数据编译成键值对的数据结构 - Axios的进度条事件,
onUploadProgress
是用来监测上传进度,显示进度信息 - 最后我们调用 Axios 提供的
post()
&get()
来向后端 API 发送 POST & GET 请求
扩展阅读:《Vue Router 手把手教你搭 Vue3 路由》
创建一个 Vue 多文件上传组件
接下来,我们来写一个 Vue 上传组件,这个组件要包含上传文件的所有基本功能,比如 上传按钮、进度条、提示信息、基本 UI 等。
首先,创建一个 Vue 组件模版(UploadFiles.vue)然后把刚刚写好的配置文件(UploadFilesService.js)导入进去。
文件位置:src/components/UploadFiles.vue
<template>
</template>
<script>
import UploadService from "../services/UploadFilesService";
export default {
name: "upload-files",
data() {
return {
};
},
methods: {}
};
</script>
然后在这里定义 data()
变量
export default {
name: "upload-files",
data() {
return {
selectedFiles: undefined,
progressInfos: [],
message: "",
fileInfos: [],
};
},
};
接下来,我们定义 methods
让 selectFiles()
从 <input type="file" >
中获取选定的文件。
export default {
name: "upload-files",
...
methods: {
selectFile() {
this.progressInfos = [];
this.selectedFiles = event.target.files;
}
}
};
selectedFiles
用来访问当前选定的文件,每个文件都有一个对应的进度条(百分比&文件名)以及被 progressInfos
索引。
export default {
name: "upload-files",
...
methods: {
...
uploadFiles() {
this.message = "";
for (let i = 0; i < this.selectedFiles.length; i++) {
this.upload(i, this.selectedFiles[i]);
}
}
}
};
我们通过回调 UploadFilesService.upload()
来获得上传信息
export default {
name: "upload-files",
...
methods: {
...
upload(idx, file) {
this.progressInfos[idx] = { percentage: 0, fileName: file.name };
UploadService.upload(file, (event) => {
this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
})
.then((response) => {
let prevMessage = this.message ? this.message + "\n" : "";
this.message = prevMessage + response.data.message;
return UploadService.getFiles();
})
.then((files) => {
this.fileInfos = files.data;
})
.catch(() => {
this.progressInfos[idx].percentage = 0;
this.message = "Could not upload the file:" + file.name;
});
}
}
};
- 文件上传进度我们可以根据
event.loaded
和event.total
来计算 - 如果传输完成,我们调用
UploadFilesService.getFiles()
来获取文件信息,并将结果更新到fileInfos
里,状态是一个数组{name, url}
我们还需要在mounted()
中添加调用。
export default {
name: "upload-files",
...
mounted() {
UploadService.getFiles().then((response) => {
this.fileInfos = response.data;
});
}
};
现在我们实现上传文件 UI 的 HTML 模板。将以下内容添加到<template>
:
<template>
<div>
<div v-if="progressInfos">
<div class="mb-2"
v-for="(progressInfo, index) in progressInfos"
:key="index"
>
<span>{{progressInfo.fileName}}</span>
<div class="progress">
<div class="progress-bar progress-bar-info"
role="progressbar"
:aria-valuenow="progressInfo.percentage"
aria-valuemin="0"
aria-valuemax="100"
:style="{ width: progressInfo.percentage + '%' }"
>
{{progressInfo.percentage}}%
</div>
</div>
</div>
</div>
<label class="btn btn-default">
<input type="file" multiple @change="selectFile" />
</label>
<button class="btn btn-success"
:disabled="!selectedFiles"
@click="uploadFiles"
>
上传
</button>
<div v-if="message" class="alert alert-light" role="alert">
<ul>
<li v-for="(ms, i) in message.split('\n')" :key="i">
{{ ms }}
</li>
</ul>
</div>
<div class="card">
<div class="card-header"> 文件列表 </div>
<ul class="list-group list-group-flush">
<li class="list-group-item"
v-for="(file, index) in fileInfos"
:key="index"
>
<a :href="file.url">{{ file.name }}</a>
</li>
</ul>
</div>
</div>
</template>
在上面的代码中,我们使用 Bootstrap 进度条,这里不展开讲了,更多细节可查看 Bootstrap 文档。
在 App.vue 中添加「文件上传」组件
打开 App.vue ,在代码中导入 UploadFiles
组件。
<template>
<div id="app">
<div class="container" style="width:600px">
<div style="margin: 20px">
<h2>使用 Vue 搭建文件上传 Demo</h2>
<h5><a href="http://kalacloud.com">卡拉云</a> - 低代码开发工具,1 秒搭建上传后台</h5>
<a>使用卡拉云无需懂任何前端技术,仅需拖拽即可搭建属于你的后台管理系统</a>
</div>
<upload-files></upload-files>
</div>
</div>
</template>
<script>
import UploadFiles from "./components/UploadFiles";
export default {
name: "App",
components: {
UploadFiles
}
};
</script>
给 Vue 上传文件服务配置访问端口
文件位置:src/vue.config.js
module.exports = {
devServer: {
port: 8081
}
}
运行 Vue 前端部分
到这里,我们已经把 Vue 上传文件的前端部分写完,运行起来看看效果吧。
在 kalacloud-vue-multiple-files-upload 根目录跑一下:
npm run serve
在浏览器打开 http://localhost:8081/
可以看到前端部分已经完美显示。
文件选择器、上传按钮、文件列表都已经可以显示出来了,但还无法上传。这是因为后端部分还没有跑起来,接下来,我带领大家手把手搭建上传文件的后端部分。
扩展阅读:《5 款最棒的 Vue UI 移动端组件库 - 特别针对国内使用场景推荐》
Vue 前端「上传文件」源码
你可以在我的 github 上下载到完整的 Vue 上传文件 Demo。
当然你也可以不用这么费劲搭建前端做上传文件功能,直接使用卡拉云,无需懂前后端,简单拖拽即可生成一套属于你自己的后台管理工具。
✦ 后端部分 - 上传文件 Node.js + Express + Multer
前文我们介绍了如何使用 Vue 搭建上传文件管理工具的前端部分,接下来我教大家使用 Node.js + Express + Multer 来搭建一套上传文件的后端 Rest API,提供给 Vue 前端使用,从而实现 Vue 选择文件 + Axios 调用后端 API HTTP 通讯,最后把文件上传到服务器指定目录。
接下来,大家一起跟随本教程创建一套 Node.js 上传文件 Rest API,它的功能包括:
- 将 Vue 前端选中的文件上传到服务器的静态文件夹中
- 限制上传文件大小,最大 2MB
- GET 服务器中存储文件的 URL ,可用于下载
- GET 文件信息列表(文件名 + URL)
这是存储所有上传文件的静态文件夹:
如果我们 GET 文件列表,Node.js Rest API 会返回:
GET /files
,API 返回 文件名 + URL
我们构建的 Node.js Rest API 包含这三个功能:
- POST
/upload
上传一个文件 - GET
/files
获取文件列表(文件名+URL) - GET
/files/[filename]
下载指定文件
扩展阅读:《*好用的 5 款 Vue table 表格组件测评与推荐》
配置 Node.js 开发环境
在根目录新建 Node.js 的后端文件夹 kalacloud-express-file-upload,接下来所有操作都在这个文件夹中进行。
mkdir kalacloud-express-file-upload
cd kalacloud-express-file-upload
在 kalacloud-express-file-upload 文件夹根目录安装 Express、Multer、CORS 这三个模块:
npm install express multer cors
package.json 文件:
{
"name": "kalacloud-express-file-upload",
"version": "1.0.0",
"description": "Node.js Express Rest APis to Upload/Download Files",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"node js",
"upload",
"download",
"file",
"multipart",
"rest api",
"express"
],
"author": "bezkoder",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"multer": "^1.4.2"
}
}
配置文件上传中间件 Multer
我们使用 Multer 中间件来处理多文件上传,更多 Multer 细节请阅读它的开发文档
文件位置:src/middleware/upload.js
const util = require("util");
const multer = require("multer");
const maxSize = 2 * 1024 * 1024;
let storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, __basedir + "/resources/static/assets/uploads/");
},
filename: (req, file, cb) => {
console.log(file.originalname);
cb(null, file.originalname);
},
});
let uploadFile = multer({
storage: storage,
limits: { fileSize: maxSize },
}).single("file");
let uploadFileMiddleware = util.promisify(uploadFile);
module.exports = uploadFileMiddleware;
上面的代码我们做了这么几件事:
- 导入
multer
模块。 - 配置
multer
为磁盘存储引擎。 -
destination
:指向用于存储上传文件的文件夹。 -
filename
:上传文件上传后的文件名。
扩展阅读:《最好用的 7 款 Vue admin 后台管理框架测评》
使用 Multer 限制文件大小
我们可以使用 Multer API 来限制上传文件大小,添加 limits: { fileSize: maxSize }
以限制文件大小。
let storage = multer.diskStorage(...);
const maxSize = 2 * 1024 * 1024;
let uploadFile = multer({
storage: storage,
limits: { fileSize: maxSize }
}).single("file");
创建文件上传 / 下载控制器
在 controller 文件夹中创建 file.controller.js
上传文件:我们使用 upload()
函数
- 使用中间件功能上传文件
- 上传文件错误信息(在 Multer 中间件函数中)
- 返回信息
下载文件:
- 使用
getListFiles()
读取服务器上传文件夹中的所有文件,包含文件名和 URL - 使用
download()
接收文件名作为输入参数,然后使用 Expressres.downloa()
以附件形式传输 URL(目录+文件名)
文件位置:src/controller/file.controller.js
const uploadFile = require("../middleware/upload");
const upload = async (req, res) => {
try {
await uploadFile(req, res);
if (req.file == undefined) {
return res.status(400).send({ message: "请选择要上传的文件" });
}
res.status(200).send({
message: "文件上传成功: " + req.file.originalname,
});
} catch (err) {
res.status(500).send({
message: `无法上传文件: ${req.file.originalname}. ${err}`,
});
}
};
const getListFiles = (req, res) => {
const directoryPath = __basedir + "/resources/static/assets/uploads/";
fs.readdir(directoryPath, function (err, files) {
if (err) {
res.status(500).send({
message: "没有找到文件。",
});
}
let fileInfos = [];
files.forEach((file) => {
fileInfos.push({
name: file,
url: baseUrl + file,
});
});
res.status(200).send(fileInfos);
});
};
const download = (req, res) => {
const fileName = req.params.name;
const directoryPath = __basedir + "/resources/static/assets/uploads/";
res.download(directoryPath + fileName, fileName, (err) => {
if (err) {
res.status(500).send({
message: "无法获取文件。" + err,
});
}
});
};
module.exports = {
upload,
getListFiles,
download,
};
- 我们首先调用中间件函数
uploadFile()
- 如果 HTTP 请求不包含文件,返回 400 错误信息
- 如果出现获取错误,返回 500 错误信息
如果用户上传文件大小超限的文件应该怎么处理?
扩展阅读:《手把手教你Vue3+Node.js+Expres+MySQL环境搭建》
使用 Multer 处理文件大小超限错误
我们可以通过 catch()
来检查文件超限错误(LIMIT_FILE_SIZE
)
文件位置:src/controller/file.controller.js
const upload = async (req, res) => {
try {
await uploadFile(req, res);
...
} catch (err) {
if (err.code == "LIMIT_FILE_SIZE") {
return res.status(500).send({
message: "文件大小不能超过 2MB",
});
}
res.status(500).send({
message: `不能上传文件: ${req.file.originalname}. ${err}`,
});
}
};
设置后端 Rest API 上传文件的路径
当 Vue 前端通过 Axios 发送 HTTP 请求时,我们需要通过路由来确定服务器应该如何响应
我们来设置三种常用到的上传文件所需功能
- POST
/upload
:upload()
- GET
/files
:getListFiles()
- GET
/files/[fileName]
:download()
我们在 routes 文件夹中创建 index.js 文件:
文件位置:src/routes/index.js
const express = require("express");
const router = express.Router();
const controller = require("../controller/file.controller");
let routes = (app) => {
router.post("/upload", controller.upload);
router.get("/files", controller.getListFiles);
router.get("/files/:name", controller.download);
app.use(router);
};
module.exports = routes;
上面这段代码调用了我们前文写的控制器 file.controller.js
扩展阅读:《最好的 5 款翻译 API 接口对比测评》
创建 Express 服务
最后一步,创建 Express 服务,在根目录新建一个 server.js 文件
文件位置:kalacloud-express-file-upload/server.js
const cors = require("cors");
const express = require("express");
const app = express();
global.__basedir = __dirname;
var corsOptions = {
origin: "http://localhost:8081"
};
app.use(cors(corsOptions));
const initRoutes = require("./src/routes");
app.use(express.urlencoded({ extended: true }));
initRoutes(app);
let port = 8080;
app.listen(port, () => {
console.log(`Running at localhost:${port}`);
});
导入 express
和 cors
模块:
- 创建 Express 应用,用于构建 Rest API,然后添加
cors
中间件。 - 设置
http://localhost:8081
为 origin ,这里允许前端传入
扩展阅读:《如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)》
运行后端并测试
首先,在 kalacloud-express-file-upload 根目录执行
node server.js
把后端服务启动起来。然后我们使用 Postman 来发送 HTTP 请求,看看后端是否运行正常。
➜ kalacloud-express-file-upload node server.js
Running at localhost:8080
接着我们使用 Postman 来测试一下,我们刚刚搭建的后端服务器是否能正常运行
向后端服务器发 POST 请求上传文件
上传大于最大限制 (2MB) 的文件,500 报错。
GET 检索文件信息列表:
我们可以使用返回的文件 URL 下载这些文件,例如: http://localhost:8080/files/kalacloud-logo.png
扩展阅读:《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》
Vue + Node.js 上传文件前后端一起运行
在 kalacloud-vue-multiple-files-upload 文件夹根目录运行前端 Vue
npm run serve
在 kalacloud-express-file-upload 文件夹根目录运行后端 Node.js
node server.js
然后打开浏览器输入前端访问网址:
到这里整个前后端「上传文件」管理工具就搭建完成了。
Node.js 后端「上传文件」源码
你可以在我的 github 上下载到完整的 Node.js 后端「上传文件」源码。
如果你还没搞懂,也不用着急,直接使用卡拉云,无需懂任何前后端技术,仅需简单的鼠标拖拽即可快速生成包括「上传文件」管理在内的任何后台管理工具。立即试用卡拉云。
「上传文件」前后端搭建总结
本教程手把手教大家搭建 Vue 前端 + Node.js 后端 的「文件上传」管理工具,如果你一步步跟着走,一定已经把 Demo 跑起来了。但如果你会使用最新的低代码开发工具「卡拉云」,完全不需要这么繁琐,仅需 1 分钟,就能搭建起属于自己的「文件上传」管理工具。
注册开通卡拉云,从侧边工具栏直接拖拽组件到页面,生成上传组件和文件管理工具。1 分钟搞定「文件上传」管理工具。
扩展阅读:
- Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
- 最好的 6 个免费天气 API 接口对比测评
- 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
- 最棒的 7 个 Laravel admin 后台管理系统推荐
- Retool 是什么,怎么样? —— Retool 低代码工具测评
- 最好用的 5 个 Vue select 单选多选下拉组件
- 最好用的 7 款 Vue admin 后台管理框架测评
推荐阅读
-
开源项目】SpringBoot + VueSpringBoot + Vue 构建公司门户网站和后台管理系统 - 前端
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明:
-
使用 Vue 构建带预览功能的 "上传图片 "后台的实践指南。
-
Vue + Node.js 构建 "文件上传 "管理后台