简介
在前端开发中，文件上传是一个非常重要的功能，而云储存服务七牛云是一个很好的选择。在使用七牛云进行文件上传时，可以使用 npm 包 cordova-qiniu，该包可以在 Cordova 环境下使用，方便开发人员进行文件上传，本文将详细介绍 cordova-qiniu 的使用方法。
前置知识
在学习 cordova-qiniu 的使用之前，需要了解以下技术知识：
- Cordova
- Node.js
- npm
安装
使用 npm 进行安装：
npm install cordova-qiniu --save
配置
- 在七牛云上创建一个存储空间
- 在 Cordova 项目的 config.xml 文件中添加以下代码：
<platform name="android">
<config-file parent="/resources" target="res/xml/config.xml">
<preference name="kQiniuBucket" value="your-bucket-name" />
<preference name="kQiniuAccessKey" value="your-access-key" />
<preference name="kQiniuSecretKey" value="your-secret-key" />
<preference name="kQiniuOrigin" value="your-origin" />
</config-file>
</platform>其中，your-bucket-name、your-access-key、your-secret-key、your-origin 分别为你在七牛云上创建存储空间时，七牛云的存储空间名、AccessKey、SecretKey、外链域名信息。
使用
初始化 QiniuUploader
在 JavaScript 中使用以下代码初始化 QiniuUploader：
var qiniuUploader = new QiniuUploader();
上传文件
可以使用以下代码上传文件：
qiniuUploader.upload(filePath, key, token, function(progressEvent) {}, function(uploadError, serverResponse) {});其中，filePath 为文件的本地路径，key 为文件名，token 为上传凭证，progressEvent 为上传进度，uploadError 为上传错误信息，serverResponse 为上传成功后服务端返回的信息。
获取上传凭证
在后端使用七牛云提供的 SDK 获取上传凭证。
示例
下面是一个完整的 Cordova 项目中使用 cordova-qiniu 上传图片的示例代码：
index.html：
<button onclick="uploadImage()">上传图片</button>
app.js：
-- -------------------- ---- -------
--- ------------- - --- ----------------
-------- ------------- -
---------------------------------------------- -
------------------------------ ----------- ------ ----------------------- -
------------------- - -------------------- - - - - - ---------------------
-- --------------------- --------------- -
------------------- - -------------
---
-- --------------- -
--------------------- - -------
-- - -------- --- ---------------- ------------------------------- ---
-
--- ----- - -------------总结
cordova-qiniu 是一个方便 Cordova 项目中进行文件上传的 npm 包，在七牛云上创建存储空间后，只需要简单地配置一些信息就可以使用 cordova-qiniu 进行文件上传了。如果你已经掌握了 Cordova、Node.js、npm 的基本知识，那么学习使用 cordova-qiniu 将会大大提高你的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005735781e8991b448e95f9