Aliyun OSSの準備

• Aliyunアカウントにログインし、OSSサービスを検索します。
• Bucketを作成します（作成後、公開読み取り許可を設定してください）。
• アクセスキーを生成します。
• 環境変数にアクセスキーを設定します。

環境変数の設定方法

set ALI_OSS_KEY_ID=あなたのアクセスキーID
set ALI_OSS_KEY_SECRET=あなたのアクセスキーシークレット

setx ALI_OSS_KEY_ID "%ALI_OSS_KEY_ID%"
setx ALI_OSS_KEY_SECRET "%ALI_OSS_KEY_SECRET%"

SDKを使用した画像アップロードのテスト

以下のJavaコードを参考に画像をアップロードします。

public class ImageUploader {
    public static void main(String[] args) throws Exception {
        String endpoint = "https://oss-cn-beijing.aliyuncs.com";
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        String bucketName = "demosystem-file";
        String objectName = "testimage.jpg";
        String filePath= "C:\\Users\\User\\Documents\\test\\demosystem.jpg";
        String region = "cn-beijing";

        ClientBuilderConfiguration config = new ClientBuilderConfiguration();
        config.setSignatureVersion(SignVersion.V4);
        OSS ossClient = new OSSClientBuilder()
                .endpoint(endpoint)
                .credentialsProvider(credentialsProvider)
                .clientConfiguration(config)
                .region(region)
                .build();

        try {
            InputStream input = new FileInputStream(filePath);
            PutObjectRequest request = new PutObjectRequest(bucketName, objectName, input);
            PutObjectResult result = ossClient.putObject(request);
        } catch (OSSException oe) {
            System.out.println("OSSExceptionが発生しました:");
            System.out.println("エラーメッセージ: " + oe.getErrorMessage());
            System.out.println("エラーコード: " + oe.getErrorCode());
        } catch (ClientException ce) {
            System.out.println("ClientExceptionが発生しました:");
            System.out.println("エラーメッセージ: " + ce.getMessage());
        } finally {
            ossClient.shutdown();
        }
    }
}

X File Storageの導入

X File Storageは多様なクラウドストレージを簡単に管理することができるライブラリです。

依存関係の追加

<dependency>
    <groupId>org.dromara.x-file-storage</groupId>
    <artifactId>x-file-storage-spring</artifactId>
    <version>2.2.1</version>
</dependency>

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.16.1</version>
</dependency>

設定ファイルの編集

dromara:
  x-file-storage:
    default-platform: aliyun-oss-1
    thumbnail-suffix: ".min.jpg"
    aliyun-oss:
      - platform: aliyun-oss-1
        enable-storage: true
        access-key: ${ALI_OSS_KEY_ID}
        secret-key: ${ALI_OSS_KEY_SECRET}
        end-point: https://oss-cn-beijing.aliyuncs.com
        bucket-name: demosystem-file
        domain: https://demosystem-file.oss-cn-beijing.aliyuncs.com/
        base-path: images/

画像アップロード機能の実装

バックエンドのコード変更

以下のコードをRuoYiAdminControllerに追加します。

@Autowired
private FileStorageService fileStorageService;

@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception {
    try {
        String objectName = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyy/MM/dd")) + "/";
        FileInfo fileInfo = fileStorageService.of(file)
                .setPath(objectName)
                .upload();
        AjaxResult ajax = AjaxResult.success();
        ajax.put("url", fileInfo.getUrl());
        ajax.put("fileName", fileInfo.getUrl());
        ajax.put("newFileName", fileInfo.getUrl());
        ajax.put("originalFilename", file.getOriginalFilename());
        return ajax;
    } catch (Exception e) {
        return AjaxResult.error(e.getMessage());
    }
}

フロントエンドのコード変更

画像アップロードコンポーネントを以下の内容で変更します。

<el-form-item label="企業ロゴ" prop="enterpriseLogo">
    <image-upload 
        v-model="form.enterpriseLogo"
        :limit="1" 
        :on-remove="handleRemoveLogo" 
        :on-success="handleUploadSuccessLogo"
        :before-upload="beforeAvatarUpload"
    />
</el-form-item>

スクリプト部分を以下の内容で変更します。

const handleRemoveLogo = (file, fileList) => {
    form.enterpriseLogo = '';
}

const handleUploadSuccessLogo = async (file, fileList) => {
    try{
        const formData = new FormData();
        formData.append('file', file);
        const response = await axios.post('/common/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                ...this.upload.headers
            }
        });
        form.enterpriseLogo = response.data.url;
    }catch{
        ElMessage.error('アップロードに失敗しました、後ほどお試しください')
    }
}

const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        ElMessage.error('JPG形式のみアップロード可能です!');
    }
    if (!isLt2M) {
        ElMessage.error('2MB以下のファイルのみアップロード可能です!');
    }
    return isJPG && isLt2M;
}