vue3+nodejs上传图片到oss

以下是一个基于 Vue3 和 Node.js 的上传图片到 OSS 的示例：

1. 创建 OSS 实例

首先，需要在阿里云上创建一个 OSS 实例，并获取 AccessKeyId、AccessKeySecret、Bucket 等信息。具体操作可以参考阿里云官方文档。

2. 安装阿里云 OSS SDK

在 Node.js 中安装阿里云 OSS SDK：

npm install ali-oss

3. 在 Vue3 中编写上传图片的代码

在 Vue3 组件中，需要编写一个上传图片的方法。这个方法需要将图片文件传递给 Node.js 服务器，由服务器上传到 OSS。

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const file = ref(null)

    const handleFileChange = (event) => {
      file.value = event.target.files[0]
    }

    const uploadFile = async () => {
      const formData = new FormData()
      formData.append('file', file.value)

      try {
        const response = await fetch('http://localhost:3000/upload', {
          method: 'POST',
          body: formData
        })

        const data = await response.json()
        console.log(data)
      } catch (error) {
        console.error(error)
      }
    }

    return {
      file,
      handleFileChange,
      uploadFile
    }
  }
}
</script>

4. 在 Node.js 中编写上传图片的代码

在 Node.js 中，需要编写一个路由处理函数来接收图片文件，并将其上传到 OSS。这个路由处理函数需要使用阿里云 OSS SDK。

const OSS = require('ali-oss')
const router = require('express').Router()

const client = new OSS({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
  region: 'YOUR_REGION',
  bucket: 'YOUR_BUCKET_NAME'
})

router.post('/upload', async (req, res) => {
  const file = req.files.file
  const result = await client.put(file.name, file.data)
  console.log(result)
  res.json({ success: true })
})

module.exports = router

在这个路由处理函数中，首先创建了一个阿里云 OSS 的客户端实例，然后使用 `put` 方法将文件上传到 OSS，最后返回一个成功的响应。注意，这里使用了 `express-fileupload` 模块来处理文件上传。在使用这个模块之前，需要先安装它：

npm install express-fileupload

5. 启动 Node.js 服务器

最后，需要启动 Node.js 服务器，监听请求：

const express = require('express')
const fileUpload = require('express-fileupload')
const app = express()
const router = require('./router')

app.use(fileUpload())
app.use(router)

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

现在，上传图片到阿里云 OSS 的功能就完成了！