Java 代码实现七牛云存储图片

前言

项目想把图片上传到七牛云存储上,笔者把七牛最简单的用法示范一下,方便初学者。文章如有错误,欢迎各位指出。

http://blog.csdn.net/never_cxb/article/details/50539040

比如上面的 beautiful girl 图片的 url 是https://img-blog.csdn.net/20160119111734404

我们最终用代码上传到七牛图床后,七牛云存储的 url 为 http://7xq7ik.com1.z0.glb.clouddn.com/testimagea

本文地址 http://blog.csdn.net/never_cxb/article/details/50534859 转载请注明出处

准备工作

  1. 注册一个七牛账户 
    网址 https://portal.qiniu.com/signup?code=3lpzf1unpyr0y

  2. 登录七牛开发者自助平台,查看 Access Key 和 Secret Key (这两个 Key 代码会用到)

    http://blog.csdn.net/never_cxb/article/details/50539040

下载七牛依赖 jar 包

新建空间

图片会上传到某个空间里,代码里会用到空间名。

http://blog.csdn.net/never_cxb/article/details/50539040

代码

我们的项目需求是抓取图片, 
输入图片原始的的 url,然后利用代码抓取到七牛图床上,返回图片在七牛上的 url。 
首先定义变量存放你的 Key 和空间名。

public static final String ACCESS_KEY = "******"; // 你的access_key
public static final String SECRET_KEY = "******"; // 你的secret_key
public static final String BUCKET_NAME = "******"; // 你的secret_key
//获取到 Access Key 和 Secret Key 之后,您可以按照如下方式进行密钥配置
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

//获取空间管理器
BucketManager bucketManager = new BucketManager(auth);
try {

    // 要求url可公网正常访问BucketManager.fetch(url, bucketName, key);
    // @param url 网络上一个资源文件的URL
    // @param bucketName 空间名称
    // @param key 空间内文件的key[唯一的]
    DefaultPutRet putret = bucketManager.fetch(originalUrl, BUCKET_NAME, "testimage");

    System.out.println(putret.key);
    System.out.println("succeed upload image");
} catch (QiniuException e1) {
    e1.printStackTrace();
}

代码思路很简单,根据 key 获取到空间管理器,再指定图片的原始 url、空间名、图片的 key,就可以把图片上传到七牛上了

在七牛的空间内容管理部分可以看到图片已经上传好了,新的 url 为 http://7xq7ik.com1.z0.glb.clouddn.com/testimage 
blog.csdn.net/never_cxb

那么问题来了,如何获取图片新的 url 呢?总不能每次都通过浏览器访问七牛的网站,如何在代码里获取我们图片在七牛上的 url 呢?

域名+key 获取新的 url

还记得刚才的代码里我们给图片指定了 key 吗,只是图片在七牛空间里的唯一表示。刚才我们指定的 key 为testimage,看新的图片 url 为http://7xq7ik.com1.z0.glb.clouddn.com/testimage,新url就是刚才的 key 结尾的。

前面一大串的字符是七牛给我们的默认域名,你也可以自定义域名。

blog.csdn.net/never_cxb

那么代码思路也很简单,定义一个变量存放空间的域名,然后域名拼接图片的 key 就得到图片上传后的 url。

private static final String BUCKET_HOST_NAME = "7xq7ik.com1.z0.glb.clouddn.com";  
public String uploadByUrl(String originalUrl) {
        //...
        String imageKey = "testimage";
        DefaultPutRet putret = bucketManager.fetch(originalUrl, BUCKET_NAME, imageKey);
        newUrl = BUCKET_HOST_NAME + "/" + imageKey;
        System.out.println(newUrl);
        System.out.println("succeed upload image");
    } catch (QiniuException e1) {
        e1.printStackTrace();
    }

    return null;
}

输出信息

7xq7ik.com1.z0.glb.clouddn.com/testimage
succeed upload image

邀请注册

如果您还没有注册七牛,可以通过我的邀请链接注册 https://portal.qiniu.com/signup?code=3lpzf1unpyr0y,体验用户有一些免费空间。

好的,我可以回答你的问题。为了在ElementUI的Upload中使用七牛云储存图片,你需要进行以下步骤: 1. 首先,你需要在七牛云上创建一个存储空间,并获取到你的Access Key和Secret Key。 2. 然后,在你的Vue项目中安装七牛云的SDK,可以使用npm命令进行安装: ``` npm install qiniu-js --save ``` 3. 在你的Vue组件中,你需要引入ElementUI的Upload组件,并添加一个自定义的上传方法。这个方法将会在文件上传时被调用: ```javascript <template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :headers="headers" :data="data" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> import { Upload } from 'element-ui'; import Qiniu from 'qiniu-js'; export default { components: { Upload }, data() { return { fileList: [], token: '', key: '', domain: 'http://xxx.xxx.xxx.xxx/', headers: { 'Authorization': '', 'x-qiniu-url': '' }, data: { token: '', key: '' } }; }, methods: { beforeUpload(file) { // 获取上传凭证 let that = this; return new Promise((resolve, reject) => { axios.get('YOUR_UPLOAD_URL') .then(response => { that.token = response.data.token; that.key = response.data.key; that.headers.Authorization = `UpToken ${that.token}`; that.headers['x-qiniu-url'] = that.domain; that.data.token = that.token; that.data.key = that.key; resolve(); }) .catch(error => { reject(error); }) }); }, handleSuccess(response, file, fileList) { // 上传成功回调 console.log(response); }, handleError(error, file, fileList) { // 上传失败回调 console.log(error); } } } </script> ``` 在这段代码中,我们引入了ElementUI的Upload组件和七牛云的SDK,然后在data中定义了一些变量,包括上传凭证、上传文件的key、七牛的域名、请求头和请求参数等。在beforeUpload方法中,我们向你的服务器请求上传凭证,在请求成功后将认证信息和请求参数赋值给data和headers变量。在handleSuccess和handleError方法中,我们可以处理上传成功和上传失败的情况。 4. 最后,你需要在你的服务器端实现上传凭证的生成。可以使用七牛云的SDK,也可以使用其他语言的SDK,例如Java或Python。在服务器端生成上传凭证后,将凭证和上传文件的key返回给前端。 例如,在Node.js中,你可以使用qiniu-sdk: ```javascript const qiniu = require('qiniu'); const accessKey = 'YOUR_ACCESS_KEY'; const secretKey = 'YOUR_SECRET_KEY'; const bucket = 'YOUR_BUCKET_NAME'; const mac = new qiniu.auth.digest.Mac(accessKey, secretKey); const options = { scope: bucket, expires: 7200 }; const putPolicy = new qiniu.rs.PutPolicy(options); const uploadToken = putPolicy.uploadToken(mac); app.get('/uploadToken', (req, res) => { const key = req.query.filename; res.json({ token: uploadToken, key: key }); }); ``` 在这个例子中,我们使用qiniu-sdk生成上传凭证,并在/uploadToken路由中返回凭证和上传文件的key。 这样,你就可以在ElementUI的Upload中使用七牛云存储图片了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值