前端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

三、群晖上传

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

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码可以根据上面列出来的错误做对比进行错误抛出。

--声明--

1、会员在访问网站并且下载文档提示缺少学费请每天签到或者分享资源即可拥有学费。

2、付出是相互的，请不要想不劳而获的好事能在你身边发生，社会是公平的。

3、转载或引用本网站内容须注明原网址，并标明本网站网址(http://www.aurrel.com)。

4、转载或引用本网站中的署名文章，请按规定向原作者支付稿酬。

5、网站发布的部分源码或者教程仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件（215586711@qq.com）与我们联系处理。

本文地址: https://www.aurrel.com/thread-17552-1-1.html