Oss 对象服务存储前端方法封装

更新日期: 2020-10-04阅读: 1.3k标签: 存储

1、根据oss url 获取文件数据

/** * @description 获取文件数据流 * @author easten * @date 2020-07-16 * @export * @param {*} files 文件列表 * @returns 文件数据流对象 */ export function getFileStream(files) { return new Promise(resolve => { if (files.length > 0) { let data = []; files.forEach(item => { ossRepository .download(getFileUrl(item.url), p => {}) .then(res => { data.push({ name: `${item.name}${item.type}`, blob: res, }); if (data.length == files.length) { resolve(data); } }); }); } }); }


2、文件单个/多个下载

export function fileDownload(files) { if (files instanceof Array) { // 多文件打包下载 getFileStream(files).then(datas => { // 拼装压缩包格式 if (datas.length > 0) { SaveMultipleFile(`附件.zip`, datas).then(() => { console.log('下载成功'); }); } }); } else { // 单文件下载 ossRepository .download(getFileUrl(files.url), progress => {}) .then(blob => { SaveSingleFile(`${files.name}${files.type}`, files.size, blob).then(a => { console.log('下载成功'); }); }); } } /** * @description 批量下载 * @author easten * @date 2020-07-13 * @export * @param {*} zipName 压缩包名称 * @param {*} files 需要压缩的文件信息 */ export function SaveMultipleFile(zipName, files) { return new Promise((resolve,error) => { // 首先定义一个文件夹 let zip=new JSZIP(); files.forEach(a=>{ zip.file(a.name,a.blob); }); zip.generateAsync({type:"blob"}) .then(function(content) { saveAs(content, zipName); resolve(); }).catch(()=>{ error(); }); }); }


3、常用的文件类型

export let resourceIcon = { folder: 'folder-open', xls: 'file-excel', xlsx: 'file-excel', md: 'file-markdown', pdf: 'file-pdf', ppt: 'file-ppt', txt: 'file-text', doc: 'file-word', unknown: 'file-unknown', zip: 'file-zip', other: 'file', jpg: 'file-image', }; // 创建文件格式对应表 export const FileTypes = [ { k: 'audio/3gpp', v: '3gpp' }, { k: 'video/3gpp', v: '3gpp' }, { k: 'audio/ac3', v: 'ac3' }, { k: 'allpication/vnd.ms-asf', v: 'asf' }, { k: 'audio/basic', v: 'au' }, { k: 'text/css', v: 'css' }, { k: 'text/csv', v: 'csv' }, { k: 'application/msword ', v: 'dot' }, { k: 'application/xml-dtd', v: 'dtd' }, { k: 'image/vnd.dwg', v: 'dwg' }, { k: 'image/vnd.dxf', v: 'dxf' }, { k: 'image/gif', v: 'gif' }, { k: 'text/htm', v: 'htm' }, { k: 'text/html', v: 'html' }, { k: 'image/jp2', v: 'jp2' }, { k: 'image/jpeg', v: 'jpeg' }, { k: 'text/javascript', v: 'js' }, { k: 'application/javascript', v: 'js' }, { k: 'application/json', v: 'json' }, { k: 'audio/mpeg', v: 'mp2' }, { k: 'audio/mp4', v: 'mp4' }, { k: 'video/mpeg', v: 'mpeg' }, { k: 'application/vnd.ms-project', v: 'mpp' }, { k: 'application/ogg', v: 'ogg' }, { k: 'audio/ogg', v: 'ogg' }, { k: 'application/pdf', v: 'pdf' }, { k: 'image/png', v: 'png' }, { k: 'application/vnd.ms-powerpoint', v: 'ppt' }, { k: 'application/rtf', v: 'rtf' }, { k: 'text/rtf', v: 'rtf' }, { k: 'image/vnd.svf', v: 'svf' }, { k: 'image/tiff', v: 'tif' }, { k: 'text/plain', v: 'txt' }, { k: 'application/vnd.ms-works', v: 'wdb' }, { k: 'text/xml', v: 'xml' }, { k: 'application/xhtml+xml', v: 'xhtml' }, { k: 'application/xml', v: 'xml' }, { k: 'application/vnd.ms-excel', v: 'xls' }, { k: 'aplication/zip', v: 'zip' }, { k: 'pplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet', v: 'xlsx' }, ];

4、文件大小转换

/** * @description 文件大小转换 * @author easten * @date 2020-07-08 * @export * @param {*} fileSize * @returns kb GB G */ export function FileSizeTrans(fileSize) { let size = ''; if (fileSize < 0.1 * 1024) { //如果小于0.1KB转化成B size = fileSize.toFixed(2) + 'B'; } else if (fileSize < 0.1 * 1024 * 1024) { //如果小于0.1MB转化成KB size = (fileSize / 1024).toFixed(2) + 'KB'; } else if (fileSize < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB'; } else { //其他转化成GB size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'; }



链接: https://www.fly63.com/article/detial/9815

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

前端数据保存_使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!