Vue3 + Typescript：七牛云存储文件上传指南

前端

2023-11-25 02:37:16

前言

在现代 Web 开发中，文件上传功能是必不可少的。它允许用户将文件上传到服务器，以便进行存储、处理或共享。七牛云存储是一个流行的文件存储服务，它提供了可靠、安全且经济高效的文件存储解决方案。

七牛云存储简介

七牛云存储是一个对象存储服务，它允许用户以对象的形式存储文件。对象存储是一种简单、可扩展且经济高效的文件存储方式。七牛云存储提供多种存储类型，包括标准存储、低频存储和归档存储，以满足不同场景下的存储需求。

七牛云存储配置

在使用七牛云存储之前，您需要先注册一个七牛云账号并创建存储空间。您可以在七牛云官网上找到详细的注册和创建存储空间的步骤。

Vue3 + Typescript 项目集成七牛云存储

安装 qiniu-js SDK

npm install qiniu-js --save

在 Vue3 项目中创建一个名为 qiniu.js 的文件，并添加以下代码：

import { Upload, Button } from 'ant-design-vue';
import { ref } from 'vue';
import { request } from 'umi-request';

const accessKey = 'YOUR_ACCESS_KEY';
const secretKey = 'YOUR_SECRET_KEY';
const bucketName = 'YOUR_BUCKET_NAME';

const qiniu = new QiniuJsSDK.UploadManager({
  region: 'YOUR_REGION', // 七牛云存储区域
  uptokenUrl: '/api/qiniu/token', // 获取七牛云上传凭证的接口
});

const state = ref({
  fileList: [],
  loading: false,
});

const handleUpload = () => {
  state.loading = true;
  const formData = new FormData();
  fileList.forEach((file) => {
    formData.append('file', file.originFileObj);
  });

  request('/api/qiniu/upload', {
    method: 'POST',
    data: formData,
  }).then((res) => {
    if (res.code === 0) {
      state.loading = false;
      state.fileList = [];
      message.success('文件上传成功');
    } else {
      message.error('文件上传失败');
    }
  });
};

export default {
  components: {
    Upload,
    Button,
  },
  setup() {
    return {
      ...state,
      handleUpload,
    };
  },
};

在 Vue3 项目中创建一个名为 api/qiniu/token.js 的文件，并添加以下代码：

import { getAuth } from 'firebase/auth';

const auth = getAuth();

export default async (req, res) => {
  if (req.method === 'GET') {
    const currentUser = auth.currentUser;
    if (currentUser) {
      const token = await currentUser.getIdToken();
      res.json({
        code: 0,
        data: {
          token,
        },
      });
    } else {
      res.json({
        code: 1,
        message: '请先登录',
      });
    }
  } else {
    res.status(405).end();
  }
};

在 Vue3 项目中创建一个名为 api/qiniu/upload.js 的文件，并添加以下代码：

import { qiniu } from 'qiniu-js';

export default async (req, res) => {
  if (req.method === 'POST') {
    const { token, file } = req.body;
    const uptoken = new QiniuJsSDK.UpToken({
      token,
    });
    const key = `${Date.now()}-${file.name}`;
    const options = {
      mimeType: file.type,
    };
    try {
      await qiniu.putFile(uptoken, key, file, options);
      res.json({
        code: 0,
        data: {
          url: `https://${bucketName}.qiniucdn.com/${key}`,
        },
      });
    } catch (error) {
      res.json({
        code: 1,
        message: error.message,
      });
    }
  } else {
    res.status(405).end();
  }
};

在 Vue3 项目中创建一个名为 App.vue 的文件，并添加以下代码：

<template>
  <div>
    <Upload
      action="/api/qiniu/upload"
      listType="picture-card"
      fileList={fileList}
      onPreview={handlePreview}
      onRemove={handleRemove}
      headers={{
        Authorization: `Bearer ${token}`,
      }}
    >
      <Button icon="upload">选择文件</Button>
    </Upload>
    <Button type="primary" loading={loading} onClick={handleUpload}>上传文件</Button>
  </div>
</template>

<script>
import { Upload, Button } from 'ant-design-vue';
import { ref } from 'vue';
import { request } from 'umi-request';
import { qiniu } from 'qiniu-js';

const accessKey = 'YOUR_ACCESS_KEY';
const secretKey = 'YOUR_SECRET_KEY';
const bucketName = 'YOUR_BUCKET_NAME';

const qiniu = new QiniuJsSDK.UploadManager({
  region: 'YOUR_REGION', // 七牛云存储区域
  uptokenUrl: '/api/qiniu/token', // 获取七牛云上传凭证的接口
});

const state = ref({
  fileList: [],
  loading: false,
});

const handlePreview = (file) => {
  console.log(file);
};

const handleRemove = (file) => {
  const index = fileList.indexOf(file);
  fileList.splice(index, 1);
};

const handleUpload = () => {
  state.loading = true;
  const formData = new FormData();
  fileList.forEach((file) => {
    formData.append('file', file.originFileObj);
  });

  request('/api/qiniu/upload', {
    method: 'POST',
    data: formData,
  }).then((res) => {
    if (res.code === 0) {
      state.loading = false;
      state.fileList = [];
      message.success('文件上传成功');
    } else {
      message.error('文件上传失败');
    }
  });
};

export default {
  components: {
    Upload,
    Button,
  },
  setup() {
    return {
      ...state,
      handlePreview,
      handleRemove,
      handleUpload,
    };
  },
};
</script>

<style>
.ant-upload-list-picture-card {
  width: 100%;
}
</style>