博客
关于我
Vue上传文件/图片到七牛云
阅读量:194 次
发布时间:2019-02-28

本文共 3220 字,大约阅读时间需要 10 分钟。

目的:使用 vue 上传文件/图片 到七牛云

说明:

     1、前台使用vue,后台用 java 传递一个 token。

     2、token : 这个相当于一个密钥。

    3、简单点说。就不写什么去注册账号,找到 as he ks 啥的,都到这一步,这些都不用说了。

第一步:前台 

    1、安装 cnpm install qiniu-js /  npm install qiniu-js

    2、main.js 配置

 

   3、使用

releaseBlog() {     //发布博客                              var qiniu = require('qiniu-js')                var config = {                    useCdnDomain: true,                    region: qiniu.region.z0,     //华东                };                var putExtra = {                    fname: "",                    params: {},                    mimeType: [] || null                 };                var observer = {                    next(res){                        // ...                    },                    error(err){                        // ...                    },                     complete(res){                        // ...                    }                }                               var url1 = this.$store.state.frontUrl + "/getToken"                this.$ajax.get(url1)                .then( response => {                                        //获取 token 和 图片的名称                    this.token = response.data.token;                    this.key = response.data.key;                    //把图片上传到 七牛云                    var observable = qiniu.upload(this.$refs.file.files[0], this.key, this.token , putExtra, config)                    var subscription = observable.subscribe(observer) // 上传开始                    //把数据保存到 后台                    var url2 = this.$store.state.frontUrl + "/saveBlog"                    this.$ajax.post(url2,JSON.stringify(this.inputBlog))                    .then( response => {                                           })                })            },

这里做两点说明:

    1、获取token:很明显,我的第一个 ajax 就是,去后台获取 token 的。后面会给出后台 制作 token的代码。

    2、获取上传的文件数据:

2、获取上传的文件数据:this.$refs.file.files[0]

第二步:后台

2-1:maven 依赖

com.qiniu
qiniu-java-sdk
7.2.11
compile
com.squareup.okhttp3
okhttp
3.3.1
compile
com.google.code.gson
gson
2.6.2
compile
com.qiniu
happy-dns-java
0.1.4
compile
junit
junit
4.12
test

2-2:java代码

@RequestMapping(value = "/getToken", method = RequestMethod.GET)    public QiNiu getToken() {        QiNiu qiNiu = new QiNiu();        // 这三个 就是  ak  sk   和你的 空间名        String accessKey = "";        String secretKey = "";        String bucket = "";        long expireSeconds = 600;        StringMap putPolicy = new StringMap();        Auth auth = Auth.create(accessKey, secretKey);        String upToken = auth.uploadToken(bucket,null, expireSeconds,putPolicy);        qiNiu.setKey(UUID.randomUUID().toString());        qiNiu.setToken(upToken);      return qiNiu;    };

 

 

 

 

 

 

 

 

 

 

 

转载地址:http://ycjj.baihongyu.com/

你可能感兴趣的文章
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>
Mysql8.0注意url变更写法
查看>>
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>