Como usar Qiniuyun para fazer upload de avatares no projeto springboot+vue

Fiz um projeto que separa front-end e back-end, e não fiquei muito satisfeito com a modificação do avatar do usuário.

Então, usei a biblioteca de componentes Vant4 para alterá-lo para um arquivo e clique para fazer upload. Primeiro, planejei salvá-lo localmente. Depois de aprender sobre a conveniência do Qiniu Cloud (principalmente gratuito), decidi alterá-lo para Qiniu Cloud para armazenar fotos e grave a operação para fácil visualização e revisão.

1. Qiniu Yun

Sobre Qiniuyun

A Qiniu Cloud é uma provedora líder de serviços de nuvem pública de nível empresarial na China e está comprometida em criar serviços de PaaS baseados em cenários centrados em dados. Com foco em cenários de mídia avançada, a Qiniu lançou sucessivamente o armazenamento de objetos, a aceleração de CDN integrada, o processamento geral de dados, o serviço anti-spam de conteúdo e o serviço de nuvem ao vivo.

Qiniu Cloud Object Storage Kodo é um serviço de armazenamento altamente confiável, forte, de baixo custo e escalável fornecido pela Qiniu Cloud. Você pode acessar o serviço de armazenamento Qiniu de forma fácil e rápida por meio do console, API, SDK, etc., para realizar o armazenamento e o gerenciamento de dados massivos. Os arquivos podem ser carregados, baixados e gerenciados através do Kodo.

Em geral: Qiniu Cloud é um ambiente de armazenamento em nuvem para serviços de desenvolvimento. Ele pode hospedar recursos de arquivos estáticos no Qiniu Cloud e baixá-los. Há também muitos SDKs do Qiniu Cloud.
Para uma introdução específica ao Qiniu Cloud, consulte o documento de desenvolvimento: https://developer.qiniu.com/kodo
 

Uso da nuvem Qiniu

Primeiro, vá ao site oficial para registrar   Qiniuyun

Não vou falar nada sobre login e cadastro. Após o cadastro completo, clique na central pessoal para realizar autenticação de identidade

Quando a autenticação de identidade estiver concluída, clique no canto superior esquerdo para criar um espaço de armazenamento e clique neste objeto para armazenar Kodo

 Clique em Gerenciamento de espaço para criar um novo espaço de armazenamento,

Permite inserir o nome do espaço, área de armazenamento e controle de acesso, basta preencher conforme necessário

 

Agora temos um depósito pessoal, o sistema nos atribuirá um nome de domínio de teste, mas esse nome de domínio é válido apenas por 30 dias, podemos usar esse nome de domínio para teste primeiro e depois vincular nosso próprio nome de domínio

Clique em gerenciamento de espaço para entrar no gerenciamento de nome de domínio, ou seja, você pode adicionar um nome de domínio vinculado

Lembre-se que o nome de domínio deve ser um nome de domínio registrado

 

2. Configuração do front-end vue

Aqui eu uso o componente vant4

<template>
 <van-uploader v-model="fileList"  :before-read="beforeRead" :after-read="afterRead"/>
</template>

<script setup lang="ts">
const fileList = ref([
  {url: editUser.value.currentValue, isImage: true},
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

]);
console.log(fileList)
const beforeRead = (file: any) => {
  console.log(file+'jpg')
  if (file.type !== 'image/jpeg') {
    Toast('请上传 jpg 格式图片');
    return false;
  }
  return true;
};

const afterRead = (file: any) => {
  // 返回图片信息
  console.log(file);
  const ImgUploadFile = async (params: any) => {
    // 要把数据变成file格式
    const formData = new FormData(); // 下面有备注
    formData.append('file', params);
    console.log(formData)
    return await myAxios.post('/upload/img', formData, {
      headers: {
        // 注意修改请求头file格式
        'Content-Type': 'multipart/form-data',
      },
    });
  };
  ImgUploadFile(file.file)
  editUser.value.currentValue =  "你自己的域名/"+ file.file.name;
}
</script>

3. Configuração de springboot de back-end

.Adicionar dependência de nuvem Qiniu em pom.xml

        <!--七牛云上传-->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.11</version>
        </dependency>
        <!-- 七牛云依赖Gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.6</version>
        </dependency>

camada controladora

@Controller
@RequestMapping("upload")
public class uploadimg {
    @PostMapping("/img")
    @ResponseBody
    public void up1img(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return;
        }
        String fileName = file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        QiniuOssUtils utils = new QiniuOssUtils();
        String upload = utils.upload(inputStream, fileName);
        System.out.println(upload);
    }
}

Método da ferramenta, lembre-se de substituí-lo por seu próprio AK e CK e nome de domínio

As informações de configuração do Qiniu Cloud podem ser obtidas no centro pessoal, entre as quais AK e SK: Clique em Gerenciamento de chaves

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;

/**
 * 七牛OSS管理工具
 */
public class QiniuOssUtils {

    /**
     * 存储空间名
     */
    private static final String BUCKET = "空间名";
    /**
     * accessKey和secretKey
     */
    private static final String ACCESS_KEY = "AK";
    private static final String SECRET_KEY = "CK";
    /**
     * 外网访问地址(内置域名有效期只有30天)
     */
    private static final String BASE_URL = "域名+/";

    /**
     * 上传管理器
     */
    private UploadManager upload;
    /**
     * 桶管理器（存储空间管理器）
     */
    private BucketManager bucket;

    public QiniuOssUtils() {
        //创建配置对象
        Configuration cfg = new Configuration(Zone.zone2());
        //创建上传管理器
        upload = new UploadManager(cfg);
        //创建存储空间管理器
        bucket = new BucketManager(getAuth(), cfg);
    }

    /**
     * 返回认证器（包含的访问密钥）
     *
     * @return
     */
    private Auth getAuth() {
        return Auth.create(ACCESS_KEY, SECRET_KEY);
    }

    /**
     * 获取令牌对象（服务器返回的授权信息）
     *
     * @return
     */
    private String getToken() {
        return getAuth().uploadToken(BUCKET);
    }

    /**
     * 文件上传
     *
     * @param file
     * @return
     */
    public String upload(File file, String key) {
        try {
            return upload(new FileInputStream(file), key);
        } catch (FileNotFoundException | QiniuException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 上传文件
     *
     * @param is
     * @param key
     * @return
     * @throws QiniuException
     */
    public String upload(InputStream is, String key) throws QiniuException {
        //上传流
        Response response = upload.put(is, key, getToken(), null, null);
        //解析返回结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        //将文件的访问地址返回
        return BASE_URL + putRet.key;
    }

    /**
     * 删除文件
     *
     * @param key
     */
    public void delete(String key) {
        try {
            bucket.delete(BUCKET, key);
        } catch (QiniuException e) {
            e.printStackTrace();
        }
    }
}

Se você visualizá-lo, poderá modificá-lo no código e armazenar o caminho da imagem no banco de dados.

Ao visualizar, consulte o caminho no banco de dados, retorne-o ao front-end e o front-end pode obter o link para acessar.

O efeito final é assim

 Também podemos dar uma olhada nas informações da imagem do gerenciamento de segundo plano Qiniuyun

 Obrigado por ler. Se for útil para você, dê um joinha e apoie.