Vue图片上传到阿里云OSS，手把手教学，彻底解决！

2023-10-10 17:00:13

在 Vue 中将图片上传到阿里云 OSS 的完整指南

创建 Vue 项目

首先，让我们创建一个新的 Vue 项目，作为我们的基础。使用 Vue CLI，运行以下命令：

vue create my-project

安装和配置 Express 服务器

接下来，我们需要一个服务器来处理文件上传。我们将使用 Express 作为我们的服务器框架：

npm install express

在项目中创建一个名为 server.js 的文件，并输入以下代码：

const express = require('express');
const multer = require('multer');

const app = express();
app.use(express.static('public'));

const upload = multer({ dest: 'public/uploads/' });

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({
    success: true,
    message: 'Image uploaded successfully',
    data: {
      url: req.file.path
    }
  });
});

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

在 Vue 项目中使用 Axios

为了在 Vue 项目中进行 HTTP 请求，我们需要安装 Axios：

npm install axios

在 main.js 文件中，配置 Axios：

import Vue from 'vue';
import axios from 'axios';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

axios.defaults.baseURL = 'http://localhost:3000';

在 Vue 组件中上传图片

在 Vue 组件中，我们使用 Axios 上传图片：

export default {
  methods: {
    uploadImage(file) {
      const formData = new FormData();
      formData.append('image', file);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => {
        // Handle the response
      })
      .catch(err => {
        // Handle the error
      });
    }
  }
}