什么?一个组件就可以实现多个云存储的上传下载文件管理?

什么?一个组件就可以实现多个云存储的上传下载文件管理?

为什么现在保存文件推荐对象存储,整合性对象存储文件上传开源组件推荐

对象存储(OSS)是为互联网应用提供非结构化文件存储的服务;相对于传统硬盘存储,对象存储具有存储无上限、支持高并发访问、成本更低等优势;解决业务架构的文件存储问题,有效降低海量文件的存储成本,支持热点数据的高并发访问,提升终端用户访问体验。

怎么选择对象存储

现在市面上的对象存储多而杂,有没有一款组件可以整合市面上的对象存储
commonTool,如你所见,它是一个小型整合型的工具类,带有整合(阿里云,七牛云,又拍云,腾讯云,华为云,百度云,本地上传)OSS上传,短信发送(阿里云,腾讯云,七牛云),文件加工类,,它可以让我们脱离繁琐的开发流程,让开发变得So easy!
gtihub地址https://github.com/shengdingbox/simpleFS
gitee地址https://gitee.com/zifeiZhou/simpleFS

快速开始

  • 引入依赖
<dependency>
  <groupId>com.zhouzifei</groupId>
  <artifactId>simpleFS</artifactId>
  <version>1.0.3</version>
</dependency>
  • 使用maven从源码安装
mvn clean install

功能介绍

文件上传oss(支持阿里云,七牛云,又拍云,腾讯云,华为云,百度云,本地上传)

  • application.yml配置OSS信息
tool:
  file:
    storage-type-const: 存储类型(枚举可选择)
    bucket-name: 空间名称
    local-file-path: 本地路径
    path-prefix: 图片文件夹
    domain-url: 图片外网地址
    operator-name: 又拍云账号
    operator-pwd: 又拍云密码
    access-key: 授权AK
    secret-key: 授权SK
    endpoint: 地域
  • 编写上传类
public class FileUpload {

    @Autowired
    FileProperties fileProperties;

    public static void main(String[] args) {
        BaseFileUploader uploader = new BaseFileUploader();
        File file = new File("本地地址");
        //可以不使用配置文件,自己另外指定属性
        fileProperties.setPathPrefix("前缀");
        ApiClient apiClient = uploader.getApiClient(fileProperties);
        VirtualFile virtualFile = apiClient.uploadImg(file);
        System.out.println("上传完的文件信息为"+virtualFile);
        boolean removeFile = apiClient.removeFile("文件名称(带前缀)");
        System.out.println("文件是否删除"+removeFile);
        VirtualFile virtualFile = apiClient.multipartUpload("分片上传");
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,需要安装FilePond和FilePond Vue插件。可以通过以下命令进行安装: ``` npm install filepond filepond-plugin-file-validate-type filepond-plugin-image-preview vue-filepond filepond-plugin-image-resize ``` 安装完成后,可以在Vue组件中导入所需的插件和组件: ```javascript import Vue from 'vue' import vueFilePond from 'vue-filepond' import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type' import FilePondPluginImagePreview from 'filepond-plugin-image-preview' import FilePondPluginImageResize from 'filepond-plugin-image-resize' import 'filepond/dist/filepond.min.css' import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css' ``` 然后,可以在Vue组件中使用FilePond组件,如下所示: ```html <template> <div> <vue-file-pond ref="filePond" class="filepond" :files="files" :server="{ process: (fieldName, file, metadata, load, error, progress, abort) => { // 处理文件逻辑 } }" :label-idle="'将文件拖放到此处或 <span class=\'filepond--label-action\'>浏览</span>'" :allow-multiple="true" :max-files="5" :accepted-file-types="['image/png', 'image/jpeg']" :image-preview-max-height="256" :image-resize-target-height="256" :image-resize-target-width="256" :image-resize-quality="0.8" :image-resize-mode="'contain'" :file-validate-type-label-mismatch="'文件类型不符合要求.'" :file-validate-type-label-mime-mismatch="'文件类型不符合要求.'" :file-validate-type-label-max-file-size-exceeded="'文件大小不能超过5MB.'" :file-validate-type-label-min-file-size="'文件大小不能小于100KB.'" :file-validate-type-label-max-file-size="'文件大小不能超过5MB.'" @init="handleFilePondInit" > </vue-file-pond> </div> </template> ``` 上面的代码中,我们将FilePond组件作为Vue文件的UI组件,并定义了一些属性,例如: - `files`:用于存储已选择的文件的数组。 - `server`:用于定义文件的处理逻辑。 - `label-idle`:用于定义FilePond组件的UI标签。 - `allow-multiple`:允许选择多个文件。 - `max-files`:最多选择5个文件。 - `accepted-file-types`:只允许选择PNG和JPEG图像文件。 - `image-preview-max-height`:预览图像的最大高度为256px。 - `image-resize-target-height`:缩放图像的高度为256px。 - `image-resize-target-width`:缩放图像的宽度为256px。 - `image-resize-quality`:缩放图像的质量为0.8。 - `image-resize-mode`:缩放图像的模式为"contain"。 - `file-validate-type-label-mismatch`:文件类型不符合要求的提示信息。 - `file-validate-type-label-mime-mismatch`:文件类型不符合要求的提示信息。 - `file-validate-type-label-max-file-size-exceeded`:文件大小超过限制的提示信息。 - `file-validate-type-label-min-file-size`:文件大小不足的提示信息。 - `file-validate-type-label-max-file-size`:文件大小超过限制的提示信息。 - `init`:用于处理FilePond组件的初始化逻辑。 最后,需要在Vue组件中定义一些方法,例如: ```javascript export default { data() { return { files: [] } }, methods: { handleFilePondInit() { console.log('FilePond has initialized') } } } ``` 上面的代码中,我们定义了一个`files`数组,用于存储已选择的文件。还定义了一个`handleFilePondInit`方法,用于处理FilePond组件的初始化逻辑。 至此,一个基于Vue2和FilePond的多文件实现就完成了。需要注意的是,代码中的服务器处理逻辑需要根据实际情况进行编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值