若依前后端分离版集成x-file-storage插件实现文件上传(以华为云obs为例)

1.x-file-storage官网  https://x-file-storage.xuyanwu.cn/#/

2. 打开华为云官网 https://activity.huaweicloud.com/

    ① 左上角菜单栏中选择产品,输入obs存储

        

        ② 根据自己的业务需求选择规格即可

        

        ③ 购买完成,去控制台创建桶,获取endPoint和访问域名等参数

        ④ accesskey 和secretkey 在右边用户头像下拉菜单中的我的凭证中获取

3. 若依后端简单使用,这里以华为云obs为例

        ① 首先到ruoyi-common中导入maven坐标

 <!-- x-file-storage -->
<dependency>
      <groupId>org.dromara.x-file-storage</groupId>
      <artifactId>x-file-storage-spring</artifactId>
      <version>2.2.1</version>
 </dependency>
 <!-- 华为云sdk -->
 <dependency>
       <groupId>com.huaweicloud</groupId>
       <artifactId>esdk-obs-java</artifactId>
       <version>3.22.12</version>
 </dependency>

        ② 然后在ruoyi-admin中的application.yaml中配置参数

# 文件上传
dromara:
  x-file-storage: #文件存储配置
    default-platform: hwy-obs-1 #默认使用的存储平台 与下面你配置的platform一致
    thumbnail-suffix: ".min.jpg" #缩略图后缀,例如【.min.jpg】【.png】
    #对应平台的配置写在这里,注意缩进要对齐
    huawei-obs:
      - platform: hwy-obs-1
        enable-storage: true # 启用存储
        accessKey: your accessKey
        secretKey: your secretKey
        endPoint: your endPoint
        bucketName: 桶名称
        domain: 访问域名,例如:“http://127.0.0.1:8030/file/”,注意后面要和 path-patterns 保持一致,“/”结尾,本地存储建议使用相对路径,方便后期更换域名
        basePath: images/  # 存储的文件夹目录

​

        ③ 在ruoyi-admin中的controller包下的commonController中修改通用上传代码,如下图所示

  @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());  //注意:这里的值要改为url,前端访问的地址,需要文件的地址 而不是文件名称
           ajax.put("newFileName", fileInfo.getUrl());
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
       } catch (Exception e) {
           return AjaxResult.error(e.getMessage());
        }

    }

4.启动报错解决

        ① okhttp3.RequestBody.create(java.lang.String,okhttp3.MediaType)

        问题原因:因spring-boot约定了三方依赖的版本,在spring-boot框架中引入OBS SDK时,会将SDK所指定的三方依赖okhttp3的版本由4.8.0降至3.14.9,导致无法获取到指定方法。可以通过使用集成了三方依赖的bundle版SDK来进行规避,或在您的项目中显示的引用 4.8.0 版本的okhttp3。

        在ruoyi-common中显示导入4.8.0的okhttp3包依赖

<dependency>
     <groupId>com.squareup.okhttp3</groupId>
      <artifactId>okhttp</artifactId>
      <version>4.8.0</version>
 </dependency>

        重新启动,问题解决

         ② 报错xxx存储平台无法找到

        在ruoyi-admin中引入对应存储平台的sdk

以上就是本文内容,如各位有遇到其他问题,欢迎私聊探讨。

华为云OBS(Object Storage Service)React前端实现直接上传功能,通常需要以下几个步骤: 1. **配置API访问密钥**:首先,你需要在华为云控制台获取一个有效的Access Key和Secret Key,用于身份验证。 2. **引入库**:在React项目中,可以使用`axios`或其他HTTP客户端库来发送PUT请求到OBS的Upload URL。 3. **创建文件输入组件**:创建一个让用户选择文件的`input[type=file]`元素,并添加事件监听器来处理文件选择。 ```jsx import React, { useRef } from 'react'; const FileInput = ({ onChange }) => { const fileInput = useRef(null); return ( <div> <input type="file" ref={fileInput} onChange={(e) => onChange(e.target.files[0])} /> </div> ); }; ``` 4. **发起上传请求**:当用户选择文件后,通过设置的`onChange`回调,你可以获取到`File`对象,然后构造一个包含Access Key、Bucket名、路径以及文件数据的上传请求。 ```jsx const uploadFile = async (file, accessKey, secretKey, bucketName, objectName) => { const formData = new FormData(); formData.append('file', file); try { const response = await axios.put( `https://obs.<your-region>.myhuaweicloud.com/${bucketName}/${objectName}`, formData, { headers: { Authorization: `Bearer ${accessKey}:${secretKey}`, 'Content-Type': 'application/x-www-form-urlencoded', }, } ); // 处理上传成功后的逻辑 } catch (error) { console.error('Upload error:', error); } }; ``` 5. **处理上传状态**:在`uploadFile`函数内部,你可以处理上传的成功、失败情况,并更新UI以显示进度或者错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值