若依前后端分离版集成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技术上传图片文件的示例代码,在前端使用HTML和JavaScript实现,后端使用Java: 前端代码: ```html <form enctype="multipart/form-data"> <input type="text" name="name" placeholder="请输入名称"> <input type="file" name="file"> <button type="button" onclick="uploadFile()">提交</button> </form> <script> function uploadFile() { var name = document.querySelector('input[name="name"]').value; var file = document.querySelector('input[name="file"]').files[0]; var formData = new FormData(); formData.append("name", name); formData.append("file", file); var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload"); xhr.send(formData); } </script> ``` 在这个示例中,我们使用HTML表单和JavaScript来获取用户输入的名称和图片文件,然后使用`FormData`对象将其打包为一个HTTP请求的主体,并使用XMLHttpRequest对象发送POST请求到后端的`/upload`接口。 后端代码: ```java // 引入OBS Java SDK import com.obs.services.ObsClient; import com.obs.services.model.PutObjectResult; // 处理上传请求 @PostMapping("/upload") public String handleUpload(HttpServletRequest request) throws IOException { String name = request.getParameter("name"); Part filePart = request.getPart("file"); // 初始化OBS客户端 ObsClient obsClient = new ObsClient("<access_key_id>", "<secret_access_key>", "<endpoint>"); // 上传文件 String bucketName = "<bucket_name>"; String objectKey = name + "_" + System.currentTimeMillis() + ".jpg"; InputStream inputStream = filePart.getInputStream(); PutObjectResult putObjectResult = obsClient.putObject(bucketName, objectKey, inputStream); // 打印上传结果 System.out.println("Upload success. ETag: " + putObjectResult.getEtag()); // 关闭OBS客户端 obsClient.close(); return "success"; } ``` 在这个示例中,我们使用Java的Spring框架来接收前端发送的POST请求,并从请求参数中获取名称和文件。然后,我们使用OBS Java SDK来初始化OBS客户端,并将文件上传到我们指定的华为云OBS桶中。最后,我们打印上传结果并关闭OBS客户端。 需要注意的是,示例中的`<access_key_id>`、`<secret_access_key>`和`<endpoint>`需要替换为你的华为云OBS账户的访问密钥ID、访问密钥和OBS服务的Endpoint。`<bucket_name>`也需要替换为你要上传文件的桶名。此外,示例中只上传了图片文件,如果需要上传其他类型的文件,需要修改代码中的文件名后缀和文件类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值