Qiniuyun을 사용하여 springboot+vue 프로젝트에서 아바타를 업로드하는 방법

프론트엔드와 백엔드를 분리하는 프로젝트를 만들었고, 사용자 아바타 수정에 그다지 만족하지 못했습니다.

그래서 Vant4 컴포넌트 라이브러리를 이용해서 파일로 변경하고 클릭해서 업로드 해봤습니다 일단은 로컬에 저장할 생각이었습니다 Qiniu Cloud(주로 무료)의 편리함을 알아보고 저장을 위해 Qiniu Cloud로 변경하기로 했습니다 쉽게 보고 검토할 수 있도록 작업을 기록합니다.

1. 윤치니우

치니우윈 소개

Qiniu Cloud는 중국의 선도적인 엔터프라이즈급 퍼블릭 클라우드 서비스 제공업체이며 데이터 중심 시나리오 기반 PaaS 서비스를 만드는 데 전념하고 있습니다. 리치 미디어 시나리오에 중점을 둔 Qiniu는 객체 스토리지, 통합 CDN 가속, 일반 데이터 처리, 콘텐츠 스팸 방지 서비스 및 라이브 클라우드 서비스를 연속적으로 출시했습니다.

Qiniu Cloud Object Storage Kodo는 Qiniu Cloud에서 제공하는 매우 안정적이고 강력한 보안, 저비용 및 확장 가능한 스토리지 서비스입니다. 콘솔, API, SDK 등을 통해 Qiniu 스토리지 서비스에 쉽고 빠르게 접근하여 대용량 데이터의 저장 및 관리를 실현할 수 있습니다. Kodo를 통해 파일을 업로드, 다운로드 및 관리할 수 있습니다.

일반적으로 Qiniu Cloud는 개발 서비스를 위한 클라우드 스토리지 환경으로 Qiniu Cloud에서 정적 파일 리소스를 호스팅하고 다운로드할 수 있으며 Qiniu Cloud의 SDK도 많이 있습니다.
Qiniu Cloud에 대한 구체적인 소개는 https://developer.qiniu.com/kodo 개발 문서를 참조하십시오.
 

Qiniu 클라우드 사용

먼저 공식 웹 사이트로 이동하여   Qiniuyun을 등록하십시오.

로그인과 회원가입은 따로 말씀드리지 않겠습니다 회원가입 완료 후 개인센터 클릭하여 본인인증 진행

본인인증이 완료되면 좌측 상단을 클릭하여 저장공간을 생성하고, 이 객체를 클릭하여 Kodo를 저장합니다.

 공간 관리를 클릭하여 새 저장 공간을 생성하고,

공간 이름, 저장 영역 및 액세스 제어를 입력하고 필요에 따라 입력하십시오.

 

이제 개인 창고가 생겼고 시스템에서 테스트 도메인 이름을 할당하지만 이 도메인 이름은 30일 동안만 유효합니다. 이 도메인 이름을 먼저 테스트에 사용한 다음 자체 도메인 이름을 바인딩할 수 있습니다.

공간 관리를 클릭하여 도메인 이름 관리를 시작합니다. 즉, 바인딩된 도메인 이름을 추가할 수 있습니다.

도메인 이름은 등록된 도메인 이름이어야 합니다.

 

2. 프런트 엔드 vue 구성

여기서는 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. 백엔드 스프링부트 구성

.pom.xml에 Qiniu 클라우드 종속성 추가

        <!--七牛云上传-->
        <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>

컨트롤러 레이어

@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);
    }
}

도구 방법, 자신의 AK 및 CK 및 도메인 이름으로 교체해야 함을 기억하십시오.

Qiniu Cloud의 구성 정보는 개인 센터에서 얻을 수 있으며 그 중 AK 및 SK: 키 관리를 클릭하십시오.

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();
        }
    }
}

그것을 보면 코드에서 수정하고 데이터베이스에 이미지 경로를 저장할 수 있습니다.

볼 때 데이터베이스의 경로를 쿼리하고 프런트 엔드로 반환하면 프런트 엔드에서 액세스할 수 있는 링크를 얻을 수 있습니다.

최종 효과는 이렇습니다

 Qiniuyun 배경 관리의 사진 정보도 살펴볼 수 있습니다.

 읽어주셔서 감사합니다 도움이 되셨다면 엄지척과 응원 부탁드립니다.