在前端开发中，我们经常需要处理文件上传的需求。而上传到阿里云的对象存储中则是一种常见的方式。sfs-vue-aliyun-upload 是一个基于 vue.js 和阿里云 oss-sdk 实现的轻量级文件上传组件，它的使用方式简单且功能完善。
基本用法
安装
使用 npm 进行安装：
npm install sfs-vue-aliyun-upload
引入
在 vue 组件中引入该组件：
import aliyunUpload from 'sfs-vue-aliyun-upload'
使用
在组件中使用 aliyunUpload 组件：
-- -------------------- ---- -------
----------
--------------
----------------------
--------------------------
----------------------------------
------------------------------
----------------
---------------------------
---------------------------
-
-------------------
----------------
-----------
--------
------ ------- -
----- -------------
----------- -
------------
--
---- -- -
------ -
---------- --------------------------
------------ -------------------
---------------- -----------------------
-------------- ---------------------
------- -------------
-
--
-------- -
------------- ------ -
------------------- ---------- -----
--
------------- ----- -
------------------- ---------- ----
-
-
-
---------参数说明
actionUrl
- 类型：String
- 必选项：是
- 描述：阿里云上传地址，一般为
https://oss-cn-hangzhou.aliyuncs.com。
accessKeyId
- 类型：String
- 必选项：是
- 描述：阿里云 Access Key ID。
accessKeySecret
- 类型：String
- 必选项：是
- 描述：阿里云 Access Key Secret。
bucket
- 类型：String
- 必选项：是
- 描述：阿里云 Bucket 名称，用于存储上传的文件。
securityToken
- 类型：String
- 必选项：否
- 描述：阿里云 STS 临时 Token，用于临时授权。如果使用 AK/SK 认证，则不需要填写该参数。
on-success
- 类型：Function
- 必选项：否
- 描述：上传成功的回调函数。
on-failure
- 类型：Function
- 必选项：否
- 描述：上传失败的回调函数。
示例代码
下面是一个完整的上传图片的示例代码：
-- -------------------- ---- -------
----------
--------------
----------------------
--------------------------
----------------------------------
----------------
------------------------------
----------------
---------------------------
---------------------------
-
---------------------
----------------
-----------
--------
------ ------------ ---- -----------------------
------ ------- -
----- ----------------
----------- -
------------
--
---- -- -
------ -
---------- ---------------------------------------
------------ -------------------
---------------- -----------------------
-------------- ---------------------
------- -------------
-
--
-------- -
------------- ------ -
------------------- ---------- -----
--
------------- ----- -
------------------- ---------- ----
-
-
-
---------总结
本文介绍了 npm 包 sfs-vue-aliyun-upload 的使用方式和相关参数。该组件具有简单、高效、易用等特点，可以方便地实现前端文件上传到阿里云对象存储的功能。如果你还没有使用过该组件，赶快来试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6db6