springboot+vue+axios+elementui+七牛云实现上传文件

前言

因为本人在毕设项目实现时使用到这个功能，然后通过各种方法最终实现了文件上传，所以记录一下。 学术不精，目前本文只作为记录用。

内容

引入依赖

<!--七牛云-->
<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>[7.13.0, 7.13.99]</version>
</dependency>

yaml配置

qiniu:
  access-key: xxx # 请从七牛云个人中心-密钥管理获取
  secret-key: xxx # 请从七牛云个人中心-密钥管理获取
  bucket: xxx # 七牛云存储空间名称
  domain: xxx # 存储空间自定义域名，请提前在存储空间中进行配置

controller层

import com.example.travelsb.entity.RespPageEntity;
import com.example.travelsb.service.QiniuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/qiniu")
public class QiniuController {

    @Autowired
    private QiniuService qiniuService;

    @GetMapping("/token")
    public RespPageEntity getUploadToken() {

        RespPageEntity pageEntity = new RespPageEntity();
        pageEntity.setToken(qiniuService.getUploadToken());
        return pageEntity;
    }
}

service层

import com.example.travelsb.config.QiniuConfig;
import com.qiniu.util.Auth;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

@Service
public class QiniuService {

    @Value("${qiniu.access-key}")
    private String accessKey;

    @Value("${qiniu.secret-key}")
    private String secretKey;

    @Value("${qiniu.bucket}")
    private String bucket;

    private final QiniuConfig qiniuConfig;

    @Autowired
    public QiniuService(QiniuConfig qiniuConfig) {
        this.qiniuConfig = qiniuConfig;
    }

    public String getUploadToken() {
        // 使用QiniuConfig中配置的区域信息创建Auth对象
        Auth auth = Auth.create(accessKey, secretKey);
        // 生成上传Token
        String upToken = auth.uploadToken(bucket, null, 3600, null, true);
        return upToken;
    }
}

config层

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
// 不需要导入 com.qiniu.storage.Configuration

@Configuration // 这里使用的是Spring的@Configuration注解
public class QiniuConfig {

    @Bean
    public com.qiniu.storage.Configuration qiniuConfiguration() {
        // 创建自定义区域，直接使用上传域名
        com.qiniu.storage.Region customRegion = new com.qiniu.storage.Region.Builder()
                .srcUpHost("up-cn-east-2.qiniup.com")  // 源站上传
                .accUpHost("upload.qiniup.com")        // 加速上传（根据实际需要配置）
                .iovipHost("iovip-cn-east-2.qiniuio.com") // 源站下载
                .rsHost("rs-cn-east-2.qiniuapi.com")    // 对象管理
                .rsfHost("rsf-cn-east-2.qiniuapi.com")  // 对象列举
                .apiHost("api.qiniuapi.com")            // 计量查询
                .build();

        // 使用完全限定类名创建七牛云SDK的Configuration实例
        return new com.qiniu.storage.Configuration(customRegion);
    }
}

axios封装接口

import request from '@/utils/axios'

//上传图片
export const getToken = () => {
  return request({
    method: 'get',
    url: '/qiniu/token',
  })
}

前端代码

<template>
    <div>
        <h1>上传文件</h1>
        <div>
            <el-upload class="upload-demo" action="https://up-cn-east-2.qiniup.com" :data="extraData"
                :before-upload="handleBeforeUpload" :on-success="handleSuccess">
                <img v-if="fileUrl" :src="fileUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>

    </div>
</template>

<script>
import { getToken } from '@/api/qiniu';
export default {
    data() {
        return {
            uploadToken: '',
            extraData: {
                token: '', // 上传凭证
            },
            fileUrl: '',
        }
    },
    created() {
        this.getUploadToken();
    },
    methods: {
        getUploadToken() {
            getToken().then(res => {
                this.uploadToken = res.data.token;
                this.extraData.token = this.uploadToken;
            });
        },
        handleBeforeUpload() {
            if (!this.uploadToken) {
                this.getUploadToken();
            }
            return true;
        },
        handleSuccess(response) {
            const domain = "xxx"; // 七牛云存储空间域名
            const uploadedFileKey = response.key; // 上传成功的响应中获取的key
            this.fileUrl = `${domain}/${uploadedFileKey}`; // 构造文件外链
            //此处已经上传完成，this.fileUrl是该图片的访问外链接
        },
    }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

总结

记录帖，有疑问可以多找几个帖子对比学习