如何利用七牛云在线存储图片 - 博客频道 - CSDN.NET
cloud_guo的博客
分类：生产力工具
平时写学习笔记和博客文章的时候早已习惯了使用 Markdown 记录，各种方便，但图片的保存和展示成了一个比较关键的问题，虽然可以使用本地相对路径显示图片，但也很不方便，总不能一直是单机版吧。七牛云是国内一个不错的在线存储平台，客户众多，你不用担心哪天公司突然就跑路了。个人用户初始容量1G，实名认证后增加到10G，建议注册后进行认证。
下面简单介绍一下如何利用七牛云上传图片，然后获取我们需要的图片外链。
点击左侧左侧菜单 对象存储，一开始我们需要新建一个存储空间来存放我们的图片资源。点击新建存储空间，设置一些需要的内容，然后在左侧的存储空间列表我们就可以看到新加的空间了。
点击内容管理选项，可以看到我们的图片资源列表。点击上传文件，在新页面上传图片即可。
图片列表右侧，点击选择复制外链即可，然后放在我们的 md 文档里。
排名：千里之外
喜欢的一句话
这个世界不像说得那么美好”，但是也不像我们想象的那么糟糕，我们要hold on, 我们要走下去。
（5）（7）（3）（1）（4）（1）（1）（1）（1）（1）（2）（1）（1）关于ue上传图片到七牛云设置key
关于ue上传图片到七牛云设置key
编辑：www.fx114.net
本篇文章主要介绍了"关于ue上传图片到七牛云设置key "，主要涉及到关于ue上传图片到七牛云设置key 方面的内容，对于关于ue上传图片到七牛云设置key 感兴趣的同学可以参考一下。
多图上传设置key:dialogs文件下面，image文件下面的image.html,链接webuploader.js，不链接webuploader.min.js
webuploader.js里面
查找server (多出存在)在这部分注释代码
* @fileOverview Transport
* @todo 支持chunked传输，优势：
* 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
* 而不需要重头再传一次。另外断点续传也需要用chunked方式。
下面，大概6199行，找到这段代码：
formData.append( opts.fileVal, blob.getSource(),
opts.filename || owner._formData.name || '' );
在它后面加上：
//这步是获取文件后缀名
var fileExt=(/[.]/.exec(opts.filename)) ? /[^.]+$/.exec(opts.filename.toLowerCase()) : '';
var key = 'promotion/img/'+uuid()+'.'+fileExt[0];（自己配置，这里是举例。提供uuid()方法的uuid.js文件在image文件夹里引进去）
formData.append('key', key);
拖动图片到编辑区设置key:
ueditor.all.js文件搜索xhr。
23824行左右加入代码：
//这步是获取文件后缀名
var fileExt=(/[.]/.exec(file.name)) ? /[^.]+$/.exec(file.name.toLowerCase()) : '';
（自己配置，这里是举例。提供uuid()方法的uuid.js文件在外面项目引进去）
var key = 'promotion/img/'+uuid()+'.'+fileExt[0];
fd.append('key', key);
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：1946人阅读
java（23）
本文通过java web的使用,把要上传的图片通过浏览器上传到服务器上面.
` 文本仅供参考,可能出现很多不合理;
创建对应的jsp页面:
下面是jsp下面的对应的from表单,上传文件用的那么ImgFiles的属性名称,同样你可以使用其他的,或者以数组的形式,比如imgFiles[0],…
action="http://ipAdress:9010/api/sdingba/upload" method="post"
enctype="multipart/form-data"&
选择文件: type="file" name="imgFiles"&
选择文件: type="file" name="imgFiles"&
选择文件: type="file" name="imgFiles"&
type="submit" value="提交"&
2, 创建对应的voParam
本文主要将文件上传,不涉及其他的参数
private List&MultipartFile& imgF
// set and get method ...
3,创建对应的控制器Controller
用控制器的方式,绑定参数的方式添加对应的图片文件的属性.
@ResponseBody
@RequestMapping("/upload")
public BaseVO addMaterialData(AdMaterialParam param)
List&MultipartFile& multipartFiles = adMaterialParam.getImgFiles();
4,但是如果想上传到七牛云还是要做很多的处理的;如下
比如,你可能要处理文件的大小格式后在添加到云上面,等等,
本文的文件上传的格式使用的是MultipartFile属性的imgFile.getBytes()属性,
imgFile.getInputStream()可以获取流信息;
//imageFiles是获取到的
List&MultipartFile&
List&AdImagePath& adImagePaths = new ArrayList&&()
AdImagePath adImagePath
for (int i = 0
adImagePath = new AdImagePath()
adImagePath.setMaterialId(adMaterialId)
MultipartFile imgFile = imageFiles.get(i)
boolean isImage = isImage(imgFile.getInputStream())
if (isImage) {
// 处理文件 大小
byte[] imgBytes = setImageTypeSize(setWidth, setHeight, imgFile)
if (!CollectionUtils.sizeIsEmpty(imgBytes)) {
String resultPath = qiniuYunUtils.upload(imgBytes, imgFile.getOriginalFilename(),
String.valueOf(i + 1))
// String resultPath=qiniuYunUtils.upload(imgFile.getBytes(),imgFile.getOriginalFilename())
String path = JSON.parseObject(resultPath).get("key").toString()
adImagePath.setImageUrl(path)
} catch (IOException e) {
e.printStackTrace()
jsonObject.put("result", "error")
adImagePaths.add(adImagePath)
**以下是上面那段代码包含的函数;不足的参考上一篇博客,utils**
* 判断文件是否是图片格式
* imageFile
private boolean isImage(InputStream imageFile) {
Image img = null;
img = ImageIO.read(imageFile);
if (img == null || img.getWidth(null) &= 0 || img.getHeight(null) &= 0) {
return false;
return true;
} catch (Exception e) {
return false;
} finally {
img = null;
* 设置图片格式的大小
* setWidth
* setHeight
* IOException
private byte[] setImageTypeSize(int setWidth, int setHeight, MultipartFile imgFile) throws IOException {
byte[] imgB
if (setWidth & 0 || setHeight & 0) {
imgBytes = qiniuYunUtils.resizeImageFile(imgFile.getInputStream(), setWidth, setHeight);
imgBytes = imgFile.getBytes();
return imgB
* 上传文件
* file byte[]
* fileName
public static String upload(byte[] file, String fileName, String orderBy) {
String key = orderBy + "=" + UUID.randomUUID().toString() + "_" + fileN
UploadManager uploadManager = new UploadManager();
Response res = uploadManager.put(file, key, getUpToken());
return res.bodyString();
} catch (QiniuException e) {
Response r = e.
LOGGER.error("上传七牛云异常:", r.toString());
LOGGER.error("上传七牛云异常:", r.bodyString());
System.out.println();
} catch (QiniuException e1) {
return null;
**下一篇博客将 七牛云的数据怎么下载.**
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：49218次
积分：1186
积分：1186
排名：千里之外
原创：63篇
转载：25篇
(2)(1)(10)(11)(1)(2)(33)(20)(3)(1)(3)(5)多图上传设置key:
dialogs文件下面，image文件下面的image.html,链接webuploader.js，不链接webuploader.min.js
webuploader.js里面
查找server (多出存在)
在这部分注释代码
* @fileOverview Transport
* @todo 支持chunked传输，优势：
* 可以将大文件分成小块，挨个传输，可以提高大文件成功率，当失败的时候，也只需要重传那小部分，
* 而不需要重头再传一次。另外断点续传也需要用chunked方式。
下面，大概6199行，找到这段代码：
formData.append( opts.fileVal, blob.getSource(),
opts.filename || owner._formData.name || '' );&/pre&&span style=&font-size:18px&&在它后面加上&/span&&pre name=&code& class=&javascript&&&pre name=&code& class=&javascript&&//这步是获取文件后缀名
var fileExt=(/[.]/.exec(opts.filename)) ? /[^.]+$/.exec(opts.filename.toLowerCase()) : '';
var key = 'promotion/img/'+uuid()+'.'+fileExt[0];（自己配置，这里是举例。提供uuid()方法的uuid.js文件在image文件夹里引进去）
formData.append('key', key);
&/pre&&span style=&font-size:24&&拖动图片到编辑区设置key:&/span&&span style=&font-size:18&&ueditor.all.js文件搜索xhr。&/span&&span style=&font-size:18&&23824行左右加入代码：&/span&&pre name=&code& class=&javascript&&&span style=&font-size:18&&//这步是获取文件后缀名
var fileExt=(/[.]/.exec(file.name)) ? /[^.]+$/.exec(file.name.toLowerCase()) : '';
（自己配置，这里是举例。提供uuid()方法的uuid.js文件在外面项目引进去）
var key = 'promotion/img/'+uuid()+'.'+fileExt[0];
fd.append('key', key);&/span&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1840次
排名：千里之外
(2)(2)(2)(1)问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
七牛js sdk　自带有大文件分片功能，　却不能上传大于100m 的文件；如何才能用js SDK　上传大于100Ｍ的文件呢，我们业务需要传视频。如果走自己的服务器在转到七牛，SDK的直传优势就没了
来源: 七牛云存储问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
js-SDK里面的main.js可以设置初始化代码。
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
//上传模式,依次退化
browse_button: 'pickfiles',
//上传选择的点选按钮，**必需**
uptoken_url: '/token',
//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
// uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
// save_key: true,
// 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
domain: 'http://qiniu-/',
//bucket 域名，下载资源时用到，**必需**
container: 'container',
//上传区域DOM ID，默认是browser_button的父元素，
max_file_size: '100mb',
//最大文件体积限制
flash_swf_url: 'js/plupload/Moxie.swf',
//引入flash,相对路径
max_retries: 3,
//上传失败最大重试次数
dragdrop: true,
//开启可拖曳上传
drop_element: 'container',
//拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
chunk_size: '4mb',
//分块上传时，每片的体积
auto_start: true,
//选择文件后自动上传，若关闭需要自己绑定事件触发上传
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
'UploadProgress': function(up, file) {
// 每个文件上传时,处理相关的事情
'FileUploaded': function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
// 其中 info 是文件上传成功后，服务端返回的json，形式如
"hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
"key": "gogopher.jpg"
// 参考/docs/v6/api/overview/up/response/simple-response.html
// var domain = up.getOption('domain');
// var res = parseJSON(info);
// var sourceLink = domain + res. 获取上传成功后的文件的Url
'Error': function(up, err, errTip) {
//上传出错时,处理相关的事情
'UploadComplete': function() {
//队列文件处理完毕后,处理相关的事情
'Key': function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
var key = "";
// do something with key here
return key
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置-&基本设置-&域名设置"查看获取
// uploader 为一个plupload对象，继承了所有plupload的方法，参考/docs
如上，可以设置
max_file_size: '100mb', 调整最大的文件限制
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App