Vue3快速实现文件上传OSS

前言

上传文件可以说是经典的需求了,在后台管理项目中随处可见。一般是由前端进行文件上传,然后再由后端去处理。可以选择把文件放到服务器上,但是随着后续文件增多,可能会对服务器的开销比较大,所以一般都采用OSS(Object Storage Service)对象存储服务,将我们的文件上传到第三方服务上,而我们只需要通过url去访问文件就可以了。那么今天就让我们来简单实现一下文件上传的功能吧。

前端采用的是Element plus的upload组件,后端是NodeJS,采用阿里云的OSS服务进行存储。

本文旨在实现上传功能,不考虑额外的功能(如文件尺寸限制)。

前端

前端引用一下组件,需要注意的是Element plus的upload组件提供了action配置项,填写请求URL就可以上传文件。

但为了后期维护,我们一般都不采用action配置项,而是将其赋值为#,通过http-request封装我们自己的请求方法。

通过组件库文档可知,我们的doUpload方法会获得一个options参数,我们来看看这个参数里有什么。

可以看到通过options可以获取到组件的一些属性和方法,其中的file就是我们所需要上传的文件对象。将其解构出来通过FormData创建表单对象将文件通过我们封装的upload方法传输到后端。

typescript 复制代码
const doUpload = async (options: any) => {
  const { file } = options;
  const formData = new FormData();
  formData.append('file', file);
  await upload(fileData);
}

这里有个要点,因为是FormData表单对象,所以我们需要在请求头中设置Content-Typeapplication/form-data,这样后端才可以识别我们上传的文件,upload方法如下。

typescript 复制代码
const headers = {
  'Content-type': 'application/form-data'
};
export function upload(params: any) {
  return instance.post('/uploadImg', params, { headers });
}

后端

后端我们采用express进行编写。

首先简单实现以下接口(注:由于我采用的是TypeScript,所以可以使用ESModule即import和export进行模块引入导出)。

typescript 复制代码
import express from 'express';
const app = express();

app.post('/uploadImg',(req, res) => {});

app.listen(1300, () => {})

由于我们使用post请求,所以需要通过body-parser中间件对请求体的数据进行解析,使解析后的数据可用于后续的请求处理。

通过pnpm add body-parser 进行安装。

typescript 复制代码
import bodyParser from 'body-parser';
app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ limit: '10mb', extended: true }));

以及还需要cors中间件解决跨域问题。

pnpm add cors

typescript 复制代码
import cors from 'cors';
app.use(cors());

最后,我们还需要multer中间件处理我们上传的文件,具体使用如下。

pnpm add multer

typescript 复制代码
import multer from 'multer';
const upload = multer({ dest: 'uploads/' }); // 指明文件的地址,即我们后端服务的uploads文件夹下,如果没有会创建。

// 接口中进行文件解析
app.post('/uploadImg', upload.single('file'), async (req: any, res: Response) => {})

这里的upload.single表明只处理上传数据中的file字段对应的数据,也就是我们之前formData.append('file',file)里的file文件,如果你设置的是其他字段如fileData,那么中间件就要写为upload.single('fileData')

我们可以通过req.file来获取处理好的文件,那么我们来看看打印一下这个req.file里有什么吧。

可以看到里面包含了关于文件的一些信息,比如名称、类型、地址等,其中名称和地址会是我们所需要的参数。

OSS服务

在阿里云的OSS文档里有提供文件上传的示例代码。

进入后我们选择NodeJS的SDK参考,通过下图路径可以看到本文所需的示例代码。

可以看到要使用OSS服务需要下载ali-oss第三方库。

pnpm add ali-oss

typescript 复制代码
import * as OSS from 'ali-oss';

const client = new OSS.default({
  // yourRegion填写Bucket所在地域。以华东1(杭州)为例,Regin填写为oss-cn-hangzhou。
  region: 'oss-cn-hangzhou',
  accessKeyId: '你的阿里云key',
  accessKeySecret: '你的阿里云keyScerect',
  // 填写Bucket名称,例如examplebucket。
  bucket: '你阿里云OSS的桶名'
});

export async function put(filename: string, fileData: File) {
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径,则默认从示例程序所属项目对应本地路径中上传文件。
    const result = await client.put(filename, fileData);
    return result;
  } catch (e) {
    console.log(e);
  }
}

以上就是完整的上传方法,只需要填写配置就行,其中accessKeyIdaccessKeySecret可以通过个人面板的AccessKey管理创建获取。

随后我们就可以在接口中进行调用,传入所需的filenamefileData

typescript 复制代码
router.post('/uploadImg', upload.single('file'), async (req: any, res: Response) => {
  const file = req.file;
  const result = await put(file.originalname, file.path);
  res.send({ code: 200, data: { fileName: result?.name, url: result?.url } });
});

到现在为止,我们代码基本实现了,接下来看看成果吧。

可以在阿里云的OSS中看到我们上传的文件。

而在后端也可获取到接口返回的文件名和外链地址。

总结

以上就是通过Element Plus的Upload组件、NodeJS和阿里OSS服务实现的文件上传简单实现啦。我是花椒,如果你觉得我的文章还不错就给我点个赞吧~ 如果有什么错误也欢迎评论指正哦~

相关推荐
十一吖i2 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年3 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_4 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189116 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾8 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu10 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym15 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫16 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫20 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat21 分钟前
前端性能优化2
前端