Vue上传文件到七牛云存储的实现步骤

目的

实现前台使用Vue，后台使用Java传递token，通过七牛云存储上传图片或文件的功能。

说明

本文将详细介绍实现过程，涵盖前台和后台的具体配置及代码实现。

第一步：前台配置

1. 安装依赖

通过cnpm或者npm安装qiniu-js库：

cnpm install qiniu-js# 或者npm install qiniu-js

2. 配置主文件

在main.js中进行以下配置：

// 示例配置const qiniu = require('qiniu-js');const config = {  useCdnDomain: true,  region: qiniu.region.z0 // 例如，华东区域};const putExtra = {  fname: '', // 文件名  params: {}, // 可选参数  mimeType: [] // 上传文件的MIME类型};

3. 实现上传功能

在需要上传的组件中进行如下操作：

this.$ajax.get('/getToken')  .then(response => {    this.token = response.data.token;    this.key = response.data.key;    const file = this.$refs.file.files[0];    const observer = {      next(res) {        // 上传进度回调      },      error(err) {        // 上传失败处理      },      complete(res) {        // 上传完成回调      }    };    const uploadTask = qiniu.upload(file, this.key, this.token, putExtra, config);    const subscription = uploadTask.subscribe(observer);    // 保存上传结果到后台    return this.$ajax.post('/saveBlog', JSON.stringify(this.inputBlog))      .then(response => {        // 处理响应        return response;      });  });

重要说明

获取token：通过GET /getToken 获取token值，后台将返回包含token和图片名的响应。

上传文件：使用qiniu-js库进行文件上传，通过前台获取的token进行身份验证。

第二步：后台配置

1. Maven依赖

在项目的pom.xml中添加相关依赖：


     
    
     com.qiniu
      
    
     qiniu-java-sdk
      
    
     7.2.11
      
    
     compile
    
   
     
    
     com.squareup.okhttp3
      
    
     okhttp
      
    
     3.3.1
      
    
     compile
    
   
     
    
     com.google.code.gson
      
    
     gson
      
    
     2.6.2
      
    
     compile
    
   
     
    
     com.qiniu
      
    
     happy-dns-java
      
    
     0.1.4
      
    
     compile
    
   
     
    
     junit
      
    
     junit
      
    
     4.12
      
    
     test

2. Java代码实现

在后台控制器中实现/getToken接口：

@RequestMapping(value = "/getToken", method = RequestMethod.GET)public QiNiu getToken() {    // 初始化七牛云配置    String accessKey = ""; // 替换为实际的accessKey    String secretKey = ""; // 替换为实际的secretKey    String bucket = "your-bucket-name"; // 替换为实际的空间名    // 生成上传token    Auth auth = Auth.create(accessKey, secretKey);    String upToken = auth.uploadToken(bucket, null, 600, new StringMap());    // 生成随机的文件名    String key = UUID.randomUUID().toString();    return new QiNiu(key, upToken);}