1、准备2个图片
2、这是我们用来控制视频上传/暂停 的按钮显示图片。
在vue.js的data() 里准备好变量（切换2个按钮图片的变量）
options:{
iconsrc:‘/icons/pause.png‘,
uploadpause:‘/icons/pause.png‘,
uploadstart:‘/icons/start.png‘
},3、编写切换按钮的事件
在vue.js的methods 里：
pauseUpload(){
if (this.options.iconsrc == this.options.uploadpause){
//如果是暂停
this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
}else{
this.options.iconsrc = this.options.uploadpause;
}
}4、把该事件绑定到html模板上
<img :src="options.iconsrc" class="myicon" @click="pauseUpload">
ok，准备工作我们已经完成，下面就要来看看七牛云给我们的JSSDK中是如何处理 “文件上传和暂停的”
5、前面我们是在vue.js的mounted() 声明周期里，创建了一个七牛云的上传对象
var uploader = Qiniu.uploader({
//...
})但我们在pauseUpload() 这方法里，是拿不到uploader 这个七牛云的上传对象的。
我们需要先在data() 里添加变量数据：
qiniuUploader:null, //七牛云上传对象变量然后在创建七牛云上传对象的时候赋值给这个变量：
this.qiniuUploader = Qiniu.uploader();这样当点击页面上的”上传/暂停”按钮的时候，在触发pauseUpload() 方法中来控制七牛云的上传/暂停功能：
pauseUpload(){
if (this.options.iconsrc == this.options.uploadpause){
//如果是暂停
this.qiniuUploader.stop();
this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
}else{
this.qiniuUploader.start();
this.options.iconsrc = this.options.uploadpause;
}
}ok。现在我们已经完成了上传视频上暂停和续传功能了。
我们把整个publish.vue组件的代码也贴出来：
<template>
<div>
<el-dialog title="图片预览" v-model="isShowPic" size="small">
<span>
<img :src="video.v_pic.url">
</span>
<span slot="footer" class="dialog-footer">
</span>
</el-dialog>
<el-form :model="video" label-width="100px" class="demo-ruleForm">
<el-col :span="12">
<el-form-item label="视频标题" prop="v_title">
<el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>
</el-form-item>
<el-form-item label="视频分类" prop="v_class">
<el-select v-model="video.v_class" placeholder="请选择">
<el-option
v-for="item in this.$store.getters.navForVideoClass"
:label="item.nav_text"
:value="item.nav_id"
>
{{item.nav_text}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="视频封面" prop="v_pic">
<el-upload
action="http://localhost/yiiserver/web/index.php/video/upload"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:multiple="false"
name="Uploader[file]"
>
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item label="标签">
<input-tag :tags="video.v_tags" placeholder="输入标签后回车"></input-tag>
</el-form-item>
<el-form-item label="视频上传">
<div id="videoContainer" v-if="!isShowProgress">
<el-button id="selectVideo" type="primary">选择视频<i class="el-icon-upload el-icon--right"></i></el-button>
</div>
<div v-if="isShowProgress">
<el-progress :text-inside="true" :stroke-width="18" :percentage="videoProgressValue"></el-progress>
<img :src="options.iconsrc" class="myicon" @click="pauseUpload">
</div>
</el-form-item>
<el-form-item label="测试按钮">
<el-button type="primary" @click="testBtn">测试按钮</el-button>
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-form>
</div>
</template>
<style>
.myicon{width: 40px;cursor: pointer;}
</style>
<script>
//引入组件
import InputTag from ‘vue-input-tag‘;
export default{
mounted(){
var _this = this;
this.qiniuUploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4‘, // 上传模式，依次退化
browse_button: ‘selectVideo‘, // 上传选择的点选按钮，必需
uptoken_url: ‘http://localhost/yiiserver/web/index.php/video/uptoken‘, // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken
save_key: true, // 默认false。若在服务端生成uptoken的上传策略中指定了save_key，则开启，SDK在前端将不对key进行任何处理
domain: ‘videopro‘, // bucket域名，下载资源时用到，必需
container: ‘videoContainer‘, // 上传区域DOM ID，默认是browser_button的父元素
max_file_size: ‘100mb‘, // 最大文件体积限制
flash_swf_url: ‘../plupload/Moxie.swf‘, //引入flash，相对路径
max_retries: 3, // 上传失败最大重试次数
dragdrop: true, // 开启可拖曳上传
drop_element: ‘videoContainer‘, // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
chunk_size: ‘1mb‘, // 分块上传时，每块的体积
auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
init: {
‘FilesAdded‘: function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后，处理相关的事情
});
},
‘BeforeUpload‘: function(up, file) {
// 每个文件上传前，处理相关的事情
_this.isShowProgress = true;
},
‘UploadProgress‘: function(up, file) {
// 每个文件上传时，处理相关的事情
_this.videoProgressValue = file.precent;
},
‘FileUploaded‘: function(up, file, info) {
// 每个文件上传成功后，处理相关的事情
// 其中info是文件上传成功后，服务端返回的json，形式如：
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 查看简单反馈
// var domain = up.getOption(‘domain‘);
// var res = parseJSON(info);
// var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
},
‘Error‘: function(up, err, errTip) {
//上传出错时，处理相关的事情
},
‘UploadComplete‘: function() {
//队列文件处理完毕后，处理相关的事情
_this.isShowProgress = false;
},
‘Key‘: function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在unique_names: false，save_key: false时才生效
var key = "";
// do something with key here
return key
}
}
});
},
data(){
return {
qiniuUploader:null, //七牛云上传对象变量
options:{
iconsrc:‘/icons/pause.png‘,
uploadpause:‘/icons/pause.png‘,
uploadstart:‘/icons/start.png‘
},
video:{
v_title:‘‘,
v_class:2,
v_pic:{name:‘‘,url:‘‘,id:0},
v_tags:[],
},
isShowPic:false,
videoProgressValue:0,
isShowProgress:false,
}
},
methods: {
handleRemove(file, fileList) {
//移除图片
console.log(file, fileList);
this.video.v_pic.url = ‘‘;
this.video.v_pic.name = ‘‘;
},
handlePreview(file) {
//预览图片
console.log(file);
this.isShowPic = true;
},
handleSuccess(file){
//响应成功
console.log(file);
if(file.status ==1){
//保存后端返回来的数据
this.video.v_pic.url = file.url;
this.video.v_pic.name = file.name;
this.video.v_pic.id = file.img_id;
}else{
alert(‘上传失败,,请稍后再试‘);
}
},
testBtn(){
alert(this.video.v_tags);
},
pauseUpload(){
if (this.options.iconsrc == this.options.uploadpause){
//如果是暂停
this.qiniuUploader.stop();
this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
}else{
this.qiniuUploader.start();
this.options.iconsrc = this.options.uploadpause;
}
}
},
components:{
‘input-tag‘:InputTag, //注册组件
}
}
</script>时间： 2024-10-25 02:18:29