Vue3快速实现文件上传OSS的方法详解

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

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

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

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

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

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

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

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

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

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

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