设为首页收藏本站电商圈人
开启辅助访问 切换到宽版
搜索
漫潮者,私有云,NAS,新媒体电商.软件开发,商乾»社区 › 数字圈 › 技术 › 前端技术 › IT半吊子 › 前端vue如何实现上传文件至群晖 Synology

前端vue如何实现上传文件至群晖 Synology

[复制链接]
查看120 | 回复0 | 2023-10-10 10:17:23 | 显示全部楼层 |阅读模式

登录网站，浏览更多精彩内容

您需要 登录 才可以下载或查看，没有账号？加入我们

×


前言：
工作中遇到的需求千奇百怪，最近接到一个需求，需要实现上传文件时，选择上传至oss或者群晖服务器的某个文件夹中。本想着直接对接后端便可以了，哪曾想是要直接去请求群晖的接口，下面列出调研群晖上传时使用过的一些接口
一、Class 定义一个构造函数
根据你业务需要，去配置你构造函数的入参


  1. class QunHuiUpload {
  2.     constructor(file = {}, conf = {}, data = {}, hook = {}) {
  3.     /**
  4.      * 上传构造器
  5.      * @param {File} file 文件
  6.      * @param {Object} conf 字段配置
  7.      * @param {Object} data 上传时的附加数据
  8.      * @param {Object} hook 上传事件钩子
  9.      */
  10.   }

复制代码
二、实现群晖登录
群晖上传的前提，首先是需要进行登录，登录成功后会获取到群晖sid，也就是token，用于其他接口作为参数传递。登录成功后，须将sid保存
  1. /**
  2.    * @descitption 群晖登录
  3.    * @param {String} account 账户
  4.    * @param {String} password 密码
  5.    */
  6. qunhuiLogin(account, password) {
  7.     return new Promise((resolve, reject) => {
  8.       axios.get(`接口域名地址/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=login&account=${account}&passwd=${password}&session=FileStation&format=cookie`)
  9.         .then(res => {
  10.           localStorage.setItem('QunHuiToken', res.data.data.sid)
  11.           resolve(res.data.data.sid)
  12.         }).catch(err => {
  13.           reject(err)
  14.         })
  15.     })
  16.   }

复制代码
接口请求成功后，会返回登录标识---sid
1.png
三、群晖上传
群晖上传，也就到了需求最关键的一步
  1. /**
  2.    * @descitption 群晖文件上传
  3.    * @param {String} token token
  4.    * @param {String} path 文件路径
  5.    * @param {String} file 文件
  6.    * @param {String} filename 文件名
  7.    * @param {String} create_parents 如果不存在，则创建父文件夹
  8.    */
  9.   qunhuiUpload(token, path, file, filename) {
  10.     return new Promise((resolve, reject) => {
  11.       let formData = new FormData()
  12.       formData.append('path', path)
  13.       formData.append('create_parents', false)
  14.       formData.append('file', file)
  15.       formData.append('filename', filename)
  16.       axios.post(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Upload&method=upload&version=2&_sid=${token}`, formData)
  17.         .then(res => {
  18.           resolve(res.data)
  19.         }).catch(err => {
  20.           reject(err)
  21.         })
  22.     })
  23.   }


复制代码
文件上传接口成功后，并不会返回文件的具体信息，只会包含文件名称等信息
四、获取图片缩略图
上传完成图片后，需要展示图片缩略图，则需要通过接口获取到缩略图文件，获取到的是二进制文件，前端还须在请求时使用blob
  1. /**
  2.    * @descitption 获取缩略图
  3.    * @param {String} path 文件路径
  4.    * @param {String} filename 文件名
  5.    * @param {String} token token
  6.    */
  7.   getThumbUrl(path, filename, token) {
  8.     return new Promise((resolve, reject) => {
  9.       axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Thumb&version=2&method=get&path=${path}/${filename}&_sid=${token}`, {
  10.         responseType: 'blob'
  11.       }).then(res => {
  12.         const thumbUrl = window.URL.createObjectURL(res.data) // 将二进制文件转为正常文件
  13.         resolve(thumbUrl)
  14.       }).catch(err => {
  15.         reject(err)
  16.       })
  17.     })
  18.   }
复制代码
五、获取源文件
上传视频等文件时，需要通过接口拿到源文件（也是二进制文件），文档上表示下载接口，但也仅仅是拿到源文件地址，下载功能还需前端自己写js
  1. /**
  2.    * @descitption 获取到下载的源文件
  3.    * @param {String} path 文件路径
  4.    * @param {String} filename 文件名
  5.    * @param {String} token token
  6.    */
  7.   getSourceFile(path, filename, token) {
  8.     return new Promise((resolve, reject) => {
  9.       axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.Download&version=2&method=download&path=${path}/${filename}&_sid=${token}`, {
  10.         responseType: 'blob'
  11.       }).then(res => {
  12.         const objectURL = window.URL.createObjectURL(res.data)
  13.         resolve(objectURL)
  14.         this.hook.onSuccess(objectURL)
  15.       }).catch(err => {
  16.         reject(err)
  17.       })
  18.     })
  19.   }


复制代码
六、创建文件夹
群晖接口也支持通过接口创建新的文件夹
  1. **
  2.    * @descitption 创建文件夹
  3.    * @param {String} path 文件夹路径
  4.    * @param {String} name 需要创建文件夹的名称
  5.    */
  6.   createFolder(path, name, token) {
  7.     return new Promise((resolve, reject) => {
  8.       axios.get(`接口域名地址/webapi/entry.cgi?api=SYNO.FileStation.CreateFolder&version=2&method=create&force_parent=true&folder_path=${path}&name=${name}&_sid=${token}`).then(res => {
  9.         resolve(res.data)
  10.       }).catch(err => {
  11.         reject(err)
  12.       })
  13.     })
  14.   }
复制代码
以上则是构造函数中所需要的一些方法，去实现登录，上传，查看，创建文件夹等，接下来就是如何去调用他，在使用的位置，定义好你需要的配置项，比如方法中需要的账号，密码，文件夹路径，然后去new 一个构造函数。
  1. const hook = {
  2.           onSuccess: (res) => { this.QunHuiSuccess(res) },
  3.           onError: (err) => { this.QunHuiError(err) }
  4.         }
  5. const data = {
  6.           account: '账号',
  7.           password: '密码',
  8.           folder_path: '文件夹路径'
  9.       }
  10. const uploader = new Uploader(file, {}, data, hook)
复制代码
七、错误code


  1. export const code = {
  2.   400: '文件操作的参数无效',
  3.   401: '文件操作的未知错误',
  4.   402: '系统繁忙',
  5.   403: '用户执行此文件操作时无效',
  6.   404: '执行此文件操作的组无效',
  7.   405: '用户和组执行此文件操作无效',
  8.   406: '无法从帐户服务器获取用户/组信息',
  9.   407: '无操作权限',
  10.   408: '没有这样的文件或目录',
  11.   409: '不支持的文件系统',
  12.   410: '连接基于互联网的文件系统',
  13.   411: '只读文件系统',
  14.   412: '在非加密的文件系统中使用的文件名太长',
  15.   413: '在加密的文件系统中使用的文件名太长',
  16.   414: '文件已存在',
  17.   415: '内存不够用了',
  18.   416: '内存不够用了',
  19.   417: '输入输出错误',
  20.   418: '非法的名称或路径',
  21.   419: '非法文件名',
  22.   420: '文件系统上的非法文件名',
  23.   421: '设备繁忙',
  24.   599: '文件操作中没有这样的任务'
  25. }
复制代码

如果要实现群晖上传，首先需要登录拿到群晖的token---sid，上传时将sid带入，包括其余的接口，都需要sid去验证。上传后接口返回的code码可以根据上面列出来的错误做对比进行错误抛出。
群晖, 资源nas, 技术开发

相关帖子

中国领先的数字技术资源交流中心！
回复

使用道具 举报

返回列表 发新帖
游侠

213

主题

39

回帖

3738

积分

达人

积分
3738
学费
3193
回复楼主 返回列表