vue 阿里云oss直传代码示例-Go服务器开发

要在 Vue 中实现阿里云 OSS 的直传功能，您可以使用 ali-oss SDK。以下是一个简单的代码示例，展示了如何将文件直接上传到阿里云 OSS。

1. 安装依赖

首先，确保您已经安装了 ali-oss SDK：

npm install ali-oss --save

2. 配置阿里云 OSS

在您的 Vue 项目中创建一个服务文件，例如 ossService.js：

// src/ossService.js
import OSS from 'ali-oss';

const client = new OSS({
  region: '<your-region>', // 地域节点，如 'oss-cn-hangzhou'
  accessKeyId: '<your-access-key-id>',
  accessKeySecret: '<your-access-key-secret>',
  bucket: '<your-bucket-name>'
});

export const uploadFile = async (file) => {
  try {
    const result = await client.put(`uploads/${file.name}`, file);
    console.log('Upload Success:', result);
    return result;
  } catch (err) {
    console.error('Upload Error:', err);
    throw err;
  }
};

3. 在组件中使用

接下来，在您的 Vue 组件中调用这个上传方法：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="upload">Upload</button>
  </div>
</template>

<script>
import { uploadFile } from '@/ossService';

export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    
    async upload() {
      if (!this.selectedFile) {
        alert('Please select a file first!');
        return;
      }
      
      try {
        const response = await uploadFile(this.selectedFile);
        console.log('Uploaded File URL:', response.url);
        alert('Upload successful!');
      } catch (error) {
        alert('Upload failed!');
      }
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>