前言

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

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

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

前端

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

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

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

可以看到通過(guò)options可以獲取到組件的一些屬性和方法，其中的file就是我們所需要上傳的文件對(duì)象。將其解構(gòu)出來(lái)通過(guò)FormData創(chuàng)建表單對(duì)象將文件通過(guò)我們封裝的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表單對(duì)象，所以我們需要在請(qǐng)求頭中設(shè)置Content-Type為application/form-data,這樣后端才可以識(shí)別我們上傳的文件，upload方法如下。

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

后端

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

首先簡(jiǎ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請(qǐng)求,所以需要通過(guò)body-parser中間件對(duì)請(qǐng)求體的數(shù)據(jù)進(jìn)行解析，使解析后的數(shù)據(jù)可用于后續(xù)的請(qǐng)求處理。

通過(guò)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中間件解決跨域問(wèn)題。

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文件夾下，如果沒(méi)有會(huì)創(chuàng)建。

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

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

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

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

OSS服務(wù)

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

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

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

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)目對(duì)應(yīng)本地路徑中上傳文件。
    const result = await client.put(filename, fileData);
    return result;
  } catch (e) {
    console.log(e);
  }
}

以上就是完整的上傳方法，只需要填寫配置就行，其中accessKeyId和accessKeySecret可以通過(guò)個(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)了，接下來(lái)看看成果吧。

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

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

總結(jié)

以上就是通過(guò)Element Plus的Upload組件、NodeJS和阿里OSS服務(wù)實(shí)現(xiàn)的文件上傳簡(jiǎn)單實(shí)現(xiàn)啦。我是花椒，如果你覺(jué)得我的文章還不錯(cuò)就給我點(diǎn)個(gè)贊吧~ 如果有什么錯(cuò)誤也歡迎評(píng)論指正哦~

到此這篇關(guān)于Vue3快速實(shí)現(xiàn)文件上傳OSS的方法詳解的文章就介紹到這了,更多相關(guān)Vue3實(shí)現(xiàn)文件上傳OSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論