Как использовать Qiniuyun для загрузки аватаров в проекте springboot+vue

Я сделал проект, который разделяет переднюю и заднюю части, и меня не очень устроила модификация аватара пользователя.

Поэтому я использовал библиотеку компонентов Vant4, чтобы преобразовать его в файл и нажать для загрузки.Сначала я планировал сохранить его локально.Узнав об удобстве Qiniu Cloud (в основном бесплатного), я решил изменить его на Qiniu Cloud для хранения изображения и запишите операцию для удобного просмотра и просмотра.

1. Циню Юн

О Цинююнь

Qiniu Cloud является ведущим поставщиком публичных облачных услуг корпоративного уровня в Китае и стремится создавать сервисы PaaS на основе сценариев, ориентированных на данные. Сосредоточившись на мультимедийных сценариях, Qiniu последовательно запустила объектное хранилище, интегрированное ускорение CDN, общую обработку данных, службу защиты от спама и облачную службу.

Qiniu Cloud Object Storage Kodo — это высоконадежное, безопасное, недорогое и масштабируемое хранилище, предоставляемое Qiniu Cloud. Вы можете легко и быстро получить доступ к службе хранения Qiniu через консоль, API, SDK и т. д., чтобы реализовать хранение и управление массивными данными. Файлы можно загружать, скачивать и управлять ими через Kodo.

В целом: Qiniu Cloud — это облачная среда хранения для сервисов разработки, которая может размещать статические файловые ресурсы в Qiniu Cloud и загружать их, а также существует множество SDK Qiniu Cloud.
Подробное знакомство с Qiniu Cloud см. в документе по разработке: https://developer.qiniu.com/kodo.
 

Использование облака Qiniu

Сначала зайдите на официальный сайт, чтобы зарегистрироваться   Qiniuyun.

Про вход и регистрацию ничего не скажу.После завершения регистрации нажмите на личный центр для аутентификации личности

Когда аутентификация личности будет завершена, щелкните левый верхний угол, чтобы создать место для хранения, и щелкните этот объект, чтобы сохранить Kodo.

 Нажмите «Управление пространством», чтобы создать новое пространство для хранения.

Позвольте вам ввести имя пространства, область хранения и контроль доступа, просто заполните по мере необходимости.

 

Теперь у нас есть личный склад, система присвоит нам тестовое доменное имя, но это доменное имя действует только 30 дней, мы можем сначала использовать это доменное имя для тестирования, а потом уже привязывать собственное доменное имя

Нажмите «Управление пространством», чтобы войти в управление доменным именем, то есть вы можете добавить связанное доменное имя.

Помните, что доменное имя должно быть зарегистрированным доменным именем.

 

2. Конфигурация внешнего интерфейса

Здесь я использую компонент 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. Конфигурация бэкэнд-спрингбута

.Добавить облачную зависимость Qiniu в 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>

слой контроллера

@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: Click Key Management.

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.

 Спасибо за прочтение, если статья была вам полезна, поставьте лайк и поддержите.