vue3+nodejs上传图片到oss并返回在线url给node

以下是一个基于 Node.js + Vue3 的上传图片到阿里云 OSS 并返回在线 URL 的示例。

1. 安装依赖

npm install oss
npm install multer

2. 创建 OSS 实例

const OSS = require('ali-oss');

const client = new OSS({
  region: '<your region>',
  accessKeyId: '<your accessKeyId>',
  accessKeySecret: '<your accessKeySecret>',
  bucket: '<your bucket>',
  // 如果是外网访问，需要设置 endpoint，具体参考 OSS 官方文档
  // endpoint: '<your endpoint>'
});

3. 创建上传接口

const multer = require('multer');
const upload = multer({ dest: 'uploads/' }); // 指定上传文件保存的目录

app.post('/upload', upload.single('file'), async (req, res) => {
  try {
    const file = req.file;
    const result = await client.put(file.originalname, file.path);
    const url = result.url; // 获取上传后的文件 URL
    res.send({ url });
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});

4. 在 Vue3 中调用上传接口

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  const response = await axios.post('/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
  return response.data.url;
}

// 调用上传接口
const url = await uploadFile(file);
console.log(url);

注意事项：

- 在调用 `put` 方法时，第一个参数是保存到 OSS 上的文件名，这里直接使用原始文件名即可。
- 在上传文件时，需要使用 `multipart/form-data` 的请求头，否则文件无法正确上传。