html5七牛图片上传js,前端如何上传图片至七牛云

上传文件是我们在前端开发中经常遇到的一个问题。最近在做某项目管理后台的时候，需要将轮播图上传至七牛云。以前在Vue里面做过类似的功能，但是在Angular中使用同样的方法发现行不通。

此篇文章主要介绍在Angular组件中如何上传图片至七牛云。在其他前端框架(比如React、Vue等)中步骤3同样适用，只是步骤1和步骤2有所区别。下面具体介绍在Angular组件中上传图片至七牛云的步骤。

步骤1：引入依赖的js文件

引入方式1：在index.html中引入

在index.html中引入七牛js-sdk文件中的压缩文件，这里我们引入qiniu.min.js。

【注意】在引入qiniu.min.js之前，我们需要引入plupload上传组件。

Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件，简单易用且功能强大。

Plupload有以下功能和特点：

拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

支持以拖拽的方式来选取要上传的文件

支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

这里我们引入plupload.full.min.js和plupload的zh_CN.js文件。

在index中引入qiniu和plupload的js代码如下图所示：

test

以上引入js文件的方式我们这里均采用CDN的方式引入，也可以将这些文件下载到本地，然后用引入文件的方式引入。

引入方式2：通过配置angular.json的方式引入

我们也可以先在工程的src目录下建立一个文件夹lib，然后将plupload.full.min.js和qiniu.min.js下载至本地放到该目录下。如下图所示：

本地需要上传图片的依赖文件

然后通过在angualr.json中进行相应的配置，即可引入需要依赖的js文件。代码如下图所示：

"scripts": [

"./src/lib/plupload.full.min.js",

"./src/lib/qiniu.min.js"

]

步骤2：在组件中声明需要依赖的js文件

做这个功能的时候一