快捷導(dǎo)航

Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解

更新時(shí)間：2024年01月28日 10:02:58 作者：吃她喵的花椒

這篇文章給大家介紹了Vue3快速實(shí)現(xiàn)文件上傳OSS的方法,上傳文件可以說是經(jīng)典的需求了,在后臺管理項(xiàng)目中隨處可見,一般是由前端進(jìn)行文件上傳,然后再由后端去處理,本文旨在實(shí)現(xiàn)上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下

前言

上傳文件可以說是經(jīng)典的需求了，在后臺管理項(xiàng)目中隨處可見。一般是由前端進(jìn)行文件上傳，然后再由后端去處理?？梢赃x擇把文件放到服務(wù)器上，但是隨著后續(xù)文件增多，可能會(huì)對服務(wù)器的開銷比較大，所以一般都采用OSS（Object Storage Service）對象存儲(chǔ)服務(wù)，將我們的文件上傳到第三方服務(wù)上，而我們只需要通過url去訪問文件就可以了。那么今天就讓我們來簡單實(shí)現(xiàn)一下文件上傳的功能吧。

前端采用的是Element plus的upload組件，后端是NodeJS，采用阿里云的OSS服務(wù)進(jìn)行存儲(chǔ)。

本文旨在實(shí)現(xiàn)上傳功能，不考慮額外的功能（如文件尺寸限制）。

前端

前端引用一下組件，需要注意的是Element plus的upload組件提供了action配置項(xiàng)，填寫請求URL就可以上傳文件。

但為了后期維護(hù)，我們一般都不采用action配置項(xiàng),而是將其賦值為#,通過http-request封裝我們自己的請求方法。

通過組件庫文檔可知，我們的doUpload方法會(huì)獲得一個(gè)options參數(shù)，我們來看看這個(gè)參數(shù)里有什么。

可以看到通過options可以獲取到組件的一些屬性和方法，其中的file就是我們所需要上傳的文件對象。將其解構(gòu)出來通過FormData創(chuàng)建表單對象將文件通過我們封裝的upload方法傳輸?shù)胶蠖恕?/p>

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

這里有個(gè)要點(diǎn)，因?yàn)槭荈ormData表單對象，所以我們需要在請求頭中設(shè)置Content-Type為application/form-data,這樣后端才可以識別我們上傳的文件，upload方法如下。

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

后端

后端我們采用express進(jìn)行編寫。

首先簡單實(shí)現(xiàn)以下接口(注：由于我采用的是TypeScript，所以可以使用ESModule即import和export進(jìn)行模塊引入導(dǎo)出）。

import express from 'express';
const app = express();

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

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

由于我們使用post請求,所以需要通過body-parser中間件對請求體的數(shù)據(jù)進(jìn)行解析，使解析后的數(shù)據(jù)可用于后續(xù)的請求處理。

通過pnpm add body-parser 進(jìn)行安裝。

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

以及還需要cors中間件解決跨域問題。

pnpm add cors。

import cors from 'cors';
app.use(cors());

最后，我們還需要multer中間件處理我們上傳的文件，具體使用如下。

pnpm add multer

import multer from 'multer';
const upload = multer({ dest: 'uploads/' }); // 指明文件的地址，即我們后端服務(wù)的uploads文件夾下，如果沒有會(huì)創(chuàng)建。

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

這里的upload.single表明只處理上傳數(shù)據(jù)中的file字段對應(yīng)的數(shù)據(jù),也就是我們之前formData.append('file',file)里的file文件，如果你設(shè)置的是其他字段如fileData，那么中間件就要寫為upload.single('fileData')。

我們可以通過req.file來獲取處理好的文件，那么我們來看看打印一下這個(gè)req.file里有什么吧。

可以看到里面包含了關(guān)于文件的一些信息，比如名稱、類型、地址等，其中名稱和地址會(huì)是我們所需要的參數(shù)。

OSS服務(wù)

在阿里云的OSS文檔里有提供文件上傳的示例代碼。

進(jìn)入后我們選擇NodeJS的SDK參考，通過下圖路徑可以看到本文所需的示例代碼。

可以看到要使用OSS服務(wù)需要下載ali-oss第三方庫。

pnpm add ali-oss。

import * as OSS from 'ali-oss';

const client = new OSS.default({
  // yourRegion填寫B(tài)ucket所在地域。以華東1（杭州）為例，Regin填寫為oss-cn-hangzhou。
  region: 'oss-cn-hangzhou',
  accessKeyId: '你的阿里云key',
  accessKeySecret: '你的阿里云keyScerect',
  // 填寫B(tài)ucket名稱，例如examplebucket。
  bucket: '你阿里云OSS的桶名'
});

export async function put(filename: string, fileData: File) {
  try {
    // 填寫OSS文件完整路徑和本地文件的完整路徑。OSS文件完整路徑中不能包含Bucket名稱。
    // 如果本地文件的完整路徑中未指定本地路徑，則默認(rèn)從示例程序所屬項(xiàng)目對應(yīng)本地路徑中上傳文件。
    const result = await client.put(filename, fileData);
    return result;
  } catch (e) {
    console.log(e);
  }
}

以上就是完整的上傳方法，只需要填寫配置就行，其中accessKeyId和accessKeySecret可以通過個(gè)人面板的AccessKey管理創(chuàng)建獲取。

隨后我們就可以在接口中進(jìn)行調(diào)用，傳入所需的filename和fileData。

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 } });
});

到現(xiàn)在為止，我們代碼基本實(shí)現(xiàn)了，接下來看看成果吧。