上传图片到七牛云之刨坑记
2018-12-13 本文已影响0人
羊驼驼驼驼
七牛云
七牛云
一、为啥会选择七牛？
为什么越来越多的公司用七牛来作为存储数据的容器？
官方解说：
- 提供图片裁剪、缩放、格式转化、水印、原图保护和防盗链，以及音视频转码、切片和拼接等基础的数据处理服务
- 允许用户构建、上传自定义的私有数据处理服务，支持管道处理、持久化、预处理操作等所有特性。
- 作为一个开放的应用平台，欢迎各种图片、音视频、以及其他数据处理的第三方应用提供方接入，为七牛存储中的海量数据，提供增值的数据处理服务。
我说：
反正好使就行
没关系，笑一笑就好了 - - ！
二、正式步入正题
需求：上传六张图片到七牛云，吧啦吧啦吧啦.....
七牛云提供的官方SDK
官方SDK
本次主要介绍JavaScript（好像目前也只会这一个，哈哈 - - ！），大家可以先去浏览一遍官方文档 七牛云 大概了解一下。
三、开始吧啦吧啦吧啦
-
1.我们需要写一个点击的对象以及展示的容器，类似，这个：
上传必须品ing
- 需要引入的文件
<script src="{{ asset('js/qiniu.js') }}"></script>
<script src="{{ asset('js/moxie.js') }}"></script>
<script src="{{ asset('js/plupload.dev.js') }}"></script>
- 3.上传代码：
var photo_path_arr = []; // 创建存图片数组
var qiniuUploader_p='';
qiniuUploader_p = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上传模式,依次退化
browse_button:'addphotoes', // 上传选择的点选按钮，**必需**
max_file_size: '1024mb', // 最大文件体积限制
flash_swf_url: '{{ asset('js/Moxie.swf') }}', // 引入flash,相对路径
dragdrop: true, // 开启可拖曳上传
chunk_size: '4mb', // 分块上传时，每块的体积
unique_names: false, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
max_retries: 3, // 上传失败最大重试次数
// 文件类型过滤，这里限制为图片类型
filters : {
max_file_size : '1024mb',
prevent_duplicates: true,
mime_types: [
{title : "Image files", extensions : "png,jpg,jpeg"}
]
},
multi_selection: true, // 是否允许同时选择多文件
get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的token
// 从后台获取token值
uptoken_func: function (file) {
$.ajax({
type: 'GET',
url:"",
async: false,
success:function(result){
result = eval("("+result+")");
token = result;
return token;
},
error: function(result){
console.log(result)
}
})
return token;
},
domain: '', // 七牛云存储空间域名
auto_start: true, // 自动上传
log_level: 5,
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function (file) {
// 文件添加进队列后，处理相关的事情
});
},
'BeforeUpload': function (up, file) {
// 每个文件上传前，处理相关的事情
},
'UploadProgress': function (up, file) {
// 每个文件上传时，处理相关的事情
},
'UploadComplete': function () {
// 队列文件处理完毕后，处理相关的事情
},
'FileUploaded': function (up, file, info) {
// 每个文件上传完毕后，处理相关的事情
var html;
let src = JSON.parse(info).key; // 七牛云返回的key
photo_path_arr.push(src);
// 限制用户只能上传6张图片
if($(".nowimgmodel").length < 6) {
for(var i = 0; i < photo_path_arr.length; i++) {
var smallsrc = photo_path_arr[i] + '?imageView2/2/w/800'; // 避免图片太大页面加载慢
html = `<div class="nowimgmodel col-sm-4">
<div class="nowimg">
<img data-url='' class="delphoto" onclick="delectPhoto(this)" src="{{ asset('img/PC/delect.png') }}" alt="">
<img class="photoinfo" src='${smallsrc}' alt="">
</div>
<div class="small_shadow"></div>
</div>`;
}
} else {
swal({title: '最多上传6张图片', timer: 5000, type: 'error'});
return false;
}
$("#addmodeles").append(html);
qiniuUploader_p.removeFile(file);
}，
'Error': function (up, err, errTip) {
// 返回错误信息
swal({title: err, timer: 5000, type: 'error'});
},
'Key': function (up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在 unique_names: false , save_key: false 时才生效
var name =file.name;
var key =new Date().getFullYear()+""+(new Date().getMonth() + 1)+""+new Date().getDate() +""+new Date().getHours() +""+new Date().getMinutes() +""+(Math.floor(Math.random () * 900) + 100)+name.substr(name.lastIndexOf(".")); // 添加时间戳+随机数，避免文件名重复
// do something with key
return key;
}
}
})
-
4.上传完毕示例图
上传结束示例图.png
图片（限制张数）上传到七牛云简单介绍完毕，还是要根据各个小伙伴公司产品需求来写啦，其中一些细节的点大家可以去七牛云官网上了解一下，以及对于图片的处理，也阔以去官方多学习几个方法，之后也会不定期更新用七牛云上传图片，音频，视频，等等等...，小伙伴有什么更好的提议阔以在下面留言，蟹蟹~~
程序猿小伙伴们注意保暖哈
