Angular-File-Upload-Qiniu上传图片至七牛

简介: 这次是使用七牛php sdk作为服务端上传工具的。使用起来很简单都已经打包完成; 我部署了一个demo,http://114.

这次是使用七牛php sdk作为服务端上传工具的。

使用起来很简单都已经打包完成; 我部署了一个demo,http://114.215.112.167:4343

可以看下demo效果

github地址 https://github.com/tyaqing/Angular-File-Upload-Qiniu

喜欢的点个star

首先配置服务端接口

1.将Qiniu文件夹 qiniu.php index.php放入服务端

2.然后取得上传api地址

比如  http://localhost/ngupload/   Qiniu文件夹 qiniu.php index.php放在ngupload目录下,这个上传地址等下要用于配置前端

3.填入七牛ak sk

注意,里面的 server 参数是api地址,用于返回图片的七牛地址

function C($name){ 
    $Conf = array(
        'AK' =>'AK',七牛的ak
        'SK' =>'SK',七牛的sk
        'bucket' => 'nodeupload',
        'bucketUrl' => '空间域名',
        'server'=>'http://localhost/ngupload/index.php?file=',//服务端 index.php位置
        );
    return $Conf[$name];
}

装载demo

七牛配置好后,前端就很简单了

1.ng-upload是一个demo,可以先试试玩

将ng-upload app.js放入同一目录

然后 npm install express --save

node app.js  端口是4343   本地访问地址 http://127.0.0.1:4343

2,基本上是可以访问了,然后配置下接口就可以用啦

ng-upload/js/app.js 第19行

将http://localhost/ngupload/换成你的api地址

大工告成,有问题留言哦


目录
相关文章
|
6月前
|
开发者
Angular Schematics 实战 - 项目根目录新建一个文件
Angular Schematics 实战 - 项目根目录新建一个文件
30 0
|
6月前
|
JavaScript
关于 Angular 应用部署时的 base-href 参数
关于 Angular 应用部署时的 base-href 参数
55 0
|
6月前
|
JavaScript
Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
52 0
|
4月前
用Angular获取当前地址的路径path(也就是网址/#后面那坨url)
用Angular获取当前地址的路径path(也就是网址/#后面那坨url)
|
4月前
|
缓存 JavaScript 前端开发
关于 Angular PWA 应用中的 ngsw.json 文件
关于 Angular PWA 应用中的 ngsw.json 文件
30 1
|
6月前
|
JSON 数据格式
什么是 Angular 应用 angular.json 中的 assets 数组
什么是 Angular 应用 angular.json 中的 assets 数组
33 0
|
6月前
|
存储 缓存 JSON
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
32 0
|
7月前
|
资源调度 JavaScript 前端开发
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
42 0
|
9月前
|
JavaScript 前端开发
|
11月前
|
XML 前端开发 JavaScript
【前端】taro 启动文件app.ts 修改成app.tsx
【前端】taro 启动文件app.ts 修改成app.tsx
408 0