漫潮者,私有云,NAS,新媒体电商.软件开发,商乾

标题: 前端vue如何实现上传文件至群晖 Synology [打印本页]

---

作者: 游侠    时间: 2023-10-10 10:17
标题: 前端vue如何实现上传文件至群晖 Synology


前言：
工作中遇到的需求千奇百怪，最近接到一个需求，需要实现上传文件时，选择上传至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.   }
    
11. 
    

复制代码

二、实现群晖登录

群晖上传的前提，首先是需要进行登录，登录成功后会获取到群晖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.   }
    
17. 
    

复制代码

接口请求成功后，会返回登录标识---sid
(, 下载次数: 10)

上传

点击文件名下载附件

三、群晖上传

群晖上传，也就到了需求最关键的一步

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.   }
    
24. 
    
25. 
    

复制代码

文件上传接口成功后，并不会返回文件的具体信息，只会包含文件名称等信息

四、获取图片缩略图

上传完成图片后，需要展示图片缩略图，则需要通过接口获取到缩略图文件，获取到的是二进制文件，前端还须在请求时使用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.   }
    
20. 
    
21. 
    

复制代码

六、创建文件夹

群晖接口也支持通过接口创建新的文件夹

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,新媒体电商.软件开发,商乾 (https://www.aurrel.com/)

Powered by Discuz! X3.5