七牛云 js上传视频
vue的html代码
//引入js
<script src="../js/plugins/jquery-2.1.1.js"></script>
<script src="../js/qiniu/plupload.full.min.js"></script>
<script src="../js/qiniu/qiniu.js?t=3"></script>
<style>
#pickfiles {
padding: 10px;
background: #000;
border-radius: 5px;
color: #fff;
}
.progress {
color: red;
font-size: 22px;
margin-top: 20px;
}
</style>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-1"><span class="required">*</span>视频:</label>
<div class="col-xs-12 col-sm-7">
<span id='pickfiles'>上传视频</span>
<span class="progress">{{progress}}</span>
<span> <a :href="qiniu_video_url" target="_blank" v-if="qiniu_video_url!=''">点击查看视频</a></span>
<input type="hidden" name="video_url" :value="qiniu_video_url">
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
vue的js代码
created:function(){
//获取七牛云token和外部访问的URl
this.getTokenMessage();
},
methods: {
getTokenMessage(){
var that=this;
$.ajax({
url: '/admin/qiniu/getToken',
type: 'POST',
data: {'_token':"{{ csrf_token() }}"},
dataType : 'json',
success: function (data) {
var obj = data;
console.log("~~~obj",obj);
// that.video_token=obj.data.uptoken; //token
// that.video_upload_url=obj.data.domain; //外部访问url
that.initQiniu(obj.data.uptoken,obj.data.domain)
}
});
},
initQiniu (uptoken,domain){
var that=this
Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
// flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',
flash_swf_url: 'Moxie.swf', //引入flash,相对路径
chunk_size: '4mb',
uptoken: uptoken,
// uptoken_url: '',
domain: domain,// bucket域名，下载资源时用到，必需
get_new_uptoken: false,
auto_start: true,
max_retries: 3,
filters: {
max_file_size: '100mb',
prevent_duplicates: false,
// Specify what files to browse for
mime_types: [
{title : '视频格式', extensions : 'mp4'} // 限定文件后缀上传格式上传
]
},
init: {
'FilesAdded': (up, files) => {
console.log('文件就绪', files);
},
BeforeUpload: (up, file) => {
console.log('上传之前', file);
},
UploadProgress: (up, file) => {
console.log('上传中 file',file);
this.progress = file.percent + '%';
},
FileUploaded: (up, file, info) => {
// 每个文件上传成功后,处理相关的事情
// 其中 info 是文件上传成功后，服务端返回的json，形式如
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
res=JSON.parse(info)
that.qiniu_video_url = domain +'/'+ res.key; //获取上传成功后的文件的Url
console.log('获取上传成功后的文件的Url',that.qiniu_video_url)
},
Error: (up, err, errTip) => {
console.log('上传失败', err);
},
Key: (up, file) => {}
}
});
},
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
php代码
//控制器文件
<?php
namespace appadmincontroller;
use appcommoncontrollerBackend;
use servicesQiNiuService;
class Qiniu extends Backend {
public function getToken(){
$data=QiNiuService::GetTokenUrl();
return $this->result($data, 200, 'success');
}
}
<?php
namespace services;
//引入七牛云的相关文件
use QiniuAuth as Auth;
use QiniuStorageUploadManager;
use hinkfacadeConfig;
use thinkException;
//七牛云上传
class QiNiuService {
//得到七牛云token和访问url
public static function GetTokenUrl(){
// 需要填写你的 Access Key 和 Secret Key
$accessKey = Config::get('qiniu.accessKey');
$secretKey = Config::get('qiniu.secretKey');
// 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
// 要上传的空间
$bucket = Config::get('qiniu.bucket');
$visit_domain=Config::get('qiniu.visit_domain');
$token = $auth->uploadToken($bucket);
return ['uptoken'=>$token,'domain'=>$visit_domain];
}
}七牛云上传图片（包括从相机获取的和从相册获取的） 七牛云上传视频 8.0手机调起相机 都会进行描述 多图片和多视频上传 获取图片后缀 隐藏软键盘
1、导入七牛云的依赖
2、添加七牛云的工具类
https://download.csdn.net/download/jing_80/10832747 可以下载，我已上传
3、因为出于保护数据 所以中间的字符用xxxxx代替，这两个变量在七牛云上可以获取到，这个很重要，这个是获取七牛云Token需要用到的，不过我们这里的token是我们的后台返给我的，所以各位小伙伴看情况而定
4、前面的准备工作做完之后，来吧，接下来我们要写真正的上传代码了，一步一步来
如果你是准备好了相机相册各种权限的 就不说了 直接看（2）
如果你是什么也没写，那就先添加上调用相机所用的权限吧！ 先看（1）
（1）在res下创建xml文件
xml文件中的内容：
再在AndroidManifest中添加代码和权限 权限可能不够 需要什么再添加
在AndroidManifest中添加 这个provider和activity同级的
（2）七牛云上传代码
5、补充一下，看很多小伙伴都说找不到这个工具类，在这里添加上。