Skip to content

P
pica.cloud.web-education-admin
提交 6c30f8e4 编写于 作者: bo.dang's avatar bo.dang
浏览文件
操作

小生态直播三期

上级 4a0d437a
显示空白字符变更
内嵌 并排
正在显示 包含 779 行增加 和 49 行删除
src/components/common/cropper.vue 0 → 100644
浏览文件 @ 6c30f8e4
<template>
<div class="rc-cropper" v-if="originImg">
<div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
destroyed() {
this.cropper && this.cropper.destroy();
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
// canvas.width = 1000
// canvas.height = 800
canvas.width = _this.cropOption.cvWidth;
canvas.height = _this.cropOption.cvHeight;
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
if (!HTMLCanvasElement.prototype.toBlob) {
console.log('HTMLCanvasElement.prototype.toBlob####');
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function () {
var binStr = window.atob(canvas.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new window.Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
// callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
});
}
});
}
this.croppShow = true;
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
dragMode: 'move',
// autoCropArea: 0.6,
// center: true,
// autoCrop: true,
restore: false,
modal: true,
guides: true,
highlight: true,
cropBoxMovable: true,
cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放
minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度
toggleDragModeOnDblclick: false,
// aspectRatio: 75/42,
aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
this.cropper.setCropBoxData({
width: 100,
height: 100
})
// this.cropper.zoomTo(1);
},
// zoom: function (event) {
// // Keep the image in its natural size
// if (event.detail.oldRatio === 1) {
// event.preventDefault();
// }
// },
})
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
console.log('cropParam', cropParam);
this.cropper.getCroppedCanvas().toBlob(function (blob) {
var objecturl = window.URL.createObjectURL(blob);
console.log('objecturl', objecturl);
let files = new window.File([blob], 'cropper.jpg');
console.log('getCroppedCanvas', files);
let oFileReader = new window.FileReader()
console.log('oFileReader', oFileReader);
oFileReader.onloadend = function (e) {
console.log('e.target.result', e, e.target, e.target.result);
let base64 = e.target.result;
_this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
},
}
}
</script>
<style scoped lang="scss">
// .rc-cropper {
// margin-left: 20px;
// }
.rc-cropper__canvasCrop1 {
width: 800px;
height: 540px;
}
.rc-cropper__canvasCrop2 {
width: 400px;
height: 300px;
}
.rc-cropper__iconCrop {
position: absolute;
// left: 46%;
right: 13%;
top: 15%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
src/components/yqrange/baseinfo.vue
浏览文件 @ 6c30f8e4
......@@ -45,7 +45,7 @@
</div>
<div class="limit-text">
<p>限制大小: 500kb</p>
<p>尺寸：160*160</p>
<p>最小尺寸：160*160</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
......@@ -83,14 +83,36 @@
></el-option>
</el-select>
</el-form-item>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
</el-form>
</template>
<script>
let vm = null;
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from '@/components/common/cropper.vue'
export default {
name: "baseinfo",
components: {
Cropper
},
props: {
formData: {
type: Object,
......@@ -114,6 +136,24 @@
}
};
return {
showCropper: false,
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
rules: {
name: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
......@@ -183,6 +223,10 @@
},
//上传圈子头像
beforeUploadPic1(file) {
this.currentOption.aspectRatio = 1/1;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 160;
let fileLimit = {
width: 48,
height: 48,
......@@ -204,21 +248,28 @@
vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
}
if (!isLt2M) {
vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
return;
}
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function (theFile) {
let image = new Image();
image.src = theFile.target.result;
let image = new Image()
image.src = theFile.target.result
vm.slide2.oriUrl = theFile.target.result;
image.onload = function () {
let _this = this;
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
if (_this.width != _this.height) {
if (_this.width < fileLimit.width || _this.height < fileLimit.height) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
} else {
return;
}
else if(_this.width > fileLimit.width || _this.height > fileLimit.height){
vm.showCropper = true;
// return;
}
else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
closeLoading(vm);
......@@ -247,7 +298,26 @@
vm.formData.headUrl = "";
vm.imgMouseOver1 = false;
}
}
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
vm.doUploadQiNiu(argument[2])
argument[3] && argument[3].destroy();
// vm.slide2.oriUrl = "";
},
// 上传七牛
doUploadQiNiu(file){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.formData.headUrl = path.fullPath;
vm.$message.success('上传成功');
});
},
}
}
</script>
......
src/views/yqrange/create-live.vue
浏览文件 @ 6c30f8e4
......@@ -83,6 +83,16 @@
</el-form-item>
<el-form-item label="直播中人数显示规则" prop="streamType">
<el-radio-group v-model="formData.countRule" size="small">
<el-radio label="1" :disabled="formData.liveStatus != 1">实时人数</el-radio>
<el-radio label="2" :disabled="formData.liveStatus != 1">累计人数</el-radio>
<el-radio label="3" :disabled="formData.liveStatus != 1">累计人次</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="直播开始时间" prop="openTime">
<el-col :span="6">
<el-date-picker
......@@ -99,7 +109,7 @@
</el-form-item>
<el-form-item label="直播简介" class="required-label">
<el-col :span="16">
<div style="color:#666666;font-size:10px;">直播图片可选择仅文字版，仅图片版或文字版+图片版</div>
<div style="color:#666666;font-size:10px;">直播简介可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="300" rows="4" style="width:80%;"></el-input>
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length }}/300</span>
<div style="color:#666666;font-size:12px;">文字版</div>
......@@ -229,6 +239,94 @@
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>
</div>
<div class="basic-item-icon">
<el-form-item label="直播背景图">
<el-row>
<el-col :span="24">
<el-button size="small" type="primary" @click="setBackground()" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">选择背景图</el-button>
</el-col>
</el-row>
</el-form-item>
</div>
<div class="basic-item-icon">
<el-form-item label="上传课件">
<el-row>
<!--<el-col :span="24">-->
<!--<el-button size="small" type="primary" @click="addIntroImage()">点击上传课件</el-button>-->
<!--</el-col>-->
<el-col :span="16">
<el-upload action="#"
accept="*/*"
ref="upload"
:limit="1"
:show-file-list="false"
:before-upload="beforeUploadPdf">
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button type="primary" size="small" style="margin-top: -10px;" >点击上传课件</el-button>
<p style="float: right;">仅支持PDF格式，限制大小：100Mb</p>
<!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
<!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
</el-upload>
</el-col>
<el-col :span="16" v-if="formData.rtcMaterial[0].fileName != ''">
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="uploadProgress1"
status="success"
v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
</el-progress>
<div>
<span>{{fileToName(formData.rtcMaterial[0].fileName,".pdf", 6)}}({{fileToSize(formData.rtcMaterial[0].fileSize, 1)}}M)</span>
<el-button v-show="(uploadProgress1 > 0)" @click="delFile" style="margin-left: 100px;" size="small" type="text">{{uploadProgress1 && uploadProgress1 < 100 ? '取消上传' : '删除'}}</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<!--<el-form-item label="上传课件" class="required-label">-->
<!--<el-upload-->
<!--v-model="formData.materialUrl"-->
<!--class="bg-uploader"-->
<!--action="#"-->
<!--:show-file-list="false"-->
<!--:before-upload="beforeUploadPic2"-->
<!--&gt;-->
<!--<img-->
<!--v-if="formData.materialUrl"-->
<!--:src="getOSSDomain(formData.materialUrl)"-->
<!--@mouseover.stop="imgMouseOver2=true"-->
<!--class="bg-img"-->
<!--/>-->
<!--<img-->
<!--v-if="!formData.materialUrl"-->
<!--class="bg-img"-->
<!--src="../../assets/image/small.png"-->
<!--/>-->
<!--<div-->
<!--class="img-delete"-->
<!--v-show="imgMouseOver2"-->
<!--@click.stop="deleteImg(2)"-->
<!--@mouseout.stop="imgMouseOver2=false"-->
<!--&gt;-->
<!--<i class="el-icon-delete"></i>-->
<!--</div>-->
<!--<div class="limit-text">-->
<!--<p>仅支持PDF格式，限制大小: 30Mb</p>-->
<!--</div>-->
<!--</el-upload>-->
<!--</el-form-item>-->
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<div class="basic-item-icon">
<el-form-item label="直播预告图" class="required-label">
<el-upload
......@@ -349,6 +447,90 @@
</el-form>
</div>
</div>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
<el-dialog
title="请选择直播背景图"
:visible.sync="dialogVisible"
width="1000px"
:close-on-click-modal="false"
@close="handleClose"
center>
<el-form ref="setForm" :model="setForm">
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<el-radio-group>
<div class="radio-background">
<el-radio :label="3"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="6"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="9"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="12"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="15"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
</el-radio-group>
<el-radio-group>
<div class="radio-background">
<el-radio :label="3"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="6"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="9"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="12"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
<div class="radio-background">
<el-radio :label="15"></el-radio>
<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />
</div>
</el-radio-group>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button type="primary" @click="submitBackground()" right>确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
......@@ -357,12 +539,15 @@
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo } from "../../utils/yqrange/yqrangeApi";
import Cropper from '@/components/common/cropper.vue'
// import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
// import { checkPhone } from "../login.vue";
let vm = null;
export default {
components: {
BreadCrumb
BreadCrumb,
Cropper
},
data(){
let checkProjectStr = (rule, value, callback) => {
......@@ -376,6 +561,7 @@
}
};
return{
rtcId: '',
circleId: '',
curmbFirst: '云鹊小圈',
curmbSecond: '直播管理',
......@@ -390,6 +576,8 @@
liveEditFlag: false,// 直播方式、讲师是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
dialogVisible: false,
uploadProgress1: 0,
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
......@@ -399,12 +587,14 @@
pullStreamHttp: "", //H5拉流地址
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
countRule: "1", // 人数显示规则
openTime: '',// 直播开始时间
rtcIntroduces:[],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
imageContent: '',// 直播简介图片版
backgroundImages: [],// 直播背景图
// imgUrl2: '',
// imgUrl2More: {},
// imgUrl3: '',
......@@ -424,7 +614,14 @@
guests: [{
phone: '',
username: ''
}] // 嘉宾
}], // 嘉宾
rtcMaterial: [{
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
}]
},
introTextNum: 0,
rtcIntroducesText:[],
......@@ -441,6 +638,28 @@
imgMouseOver3: false,
uploadImgMessage3:false,
submitFlag: false,
showCropper: false,
setForm: {
},
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
cropperIndex: "",
pickerOptions0: {
disabledDate: time => {
// 在科学计数法中，为了使公式简便，可以用带“E”的格式表示。例如1.03乘10的8次方，可简写为“1.03e8”的形式
......@@ -503,6 +722,7 @@
},
created() {
vm = this;
// 区分内部用户和外部用户
let idType = localStorage.getItem('storageIdType');
this.circleId = this.$route.query.circleId;
......@@ -511,13 +731,13 @@
this.jumPathThird = '/live-manage?id=' + this.circleId;
},
mounted() {
const rtcId = this.$route.query.rtcId;
this.rtcId = this.$route.query.rtcId;
// if(rtcId){
// this.curmbThird = "编辑直播";
// }
if(rtcId){
if(this.rtcId){
this.curmbThird = "编辑直播";
this.initRtcInfo(rtcId);
this.initRtcInfo(this.rtcId);
}
},
......@@ -588,6 +808,11 @@
},
//上传直播简介
beforeUploadPic1(file) {
vm.cropperIndex = 10;
// this.currentOption.aspectRatio = /3;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 750;
// this.currentOption.minCropBoxHeight = 120;
let fileLimit = {
width: 750,
height: 3000,
......@@ -597,10 +822,16 @@
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadMore(file, fileLimit);
// this.beforeUploadMore(file, fileLimit);
this.beforeUpload(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
vm.cropperIndex = 20;
this.currentOption.aspectRatio = 4/3;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 120;
let fileLimit = {
width: 160,
height: 120,
......@@ -614,6 +845,11 @@
},
// 上传直播预告图
beforeUploadPic3(file) {
this.currentOption.aspectRatio = 25/14;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 750;
this.currentOption.minCropBoxHeight = 420;
vm.cropperIndex = 30;
let fileLimit = {
width: 750,
height: 420,
......@@ -625,6 +861,83 @@
};
this.beforeUpload(file, fileLimit);
},
beforeUploadPdf(file) {
let fileLimit = {
size: 100,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadPdfMore(file, fileLimit);
},
// 上传课件
beforeUploadPdfMore(file, fileLimit){
const isMp4 = file.type === 'application/pdf';
const isSize = file.size / 1024 / 1024 < fileLimit.size;
if (!isMp4) {
this.$refs.upload.clearFiles();
this.$message.error('上传课件只能是PDF格式!');
// vm.isDisabledIns = false;
file = null;
return;
}
if (!isSize) {
// this.$refs.upload.abort();
this.$refs.upload.clearFiles();
this.$message.error('课件大小不符合规范，请根据规范上传课件');
// vm.isDisabledIns = false;
file = null;
return;
}
//
// vm.disabledOpenFlag = true;
//
// vm.fileFlag = false;
// vm.deleteFileFlag = true;
// vm.fileName = file.name;
// if(file.size != null){
// vm.fileSize = vm.videoSize(file.size, 1);
// }
// else {
// vm.fileSize = file.size;
// }
this.formData.rtcMaterial[0].fileName = file.name;
this.formData.rtcMaterial[0].fileSize = file.size;
this.formData.rtcMaterial[0].rtcId = this.rtcId;
// 初始化
this.uploadProgress1 = Number("0.00");
this.uploadProgress = Number("0.00");
let vm = this;
// vm.$message.success('开始上传')
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
// if(vm.playbackForm.videos != null && vm.playbackForm.videos[0] != null){
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// }
vm.formData.rtcMaterial[0].fileUrl = path.fullPath;
// vm.playbackForm.videos[0].videoSize =
// vm.playbackForm.videos[0].seqNo = 0;
// vm.playbackForm.videos[0].videoName = vm.fileName;
// vm.playbackForm.videos[0].videoSize = file.size();
// vm.playbackForm.videos[0].videoSource = 2;
// vm.playbackForm.videos[0].videoType = 1;
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// vm.fileFlag = false;
//
// vm.deleteFileFlag = true;
//
// vm.uploadProgress1 = Number("0.00");
// vm.uploadProgress = Number("0.00");
vm.$message.success('上传成功');
});
},
//上传图片
beforeUpload(file, fileLimit) {
let vm = this;
......@@ -635,42 +948,72 @@
vm.$message.error("图片格式不符合规范，请根据规范上传图片");
return;
}
if (!isLt2M) {
vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
return;
}
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
vm.slide2.oriUrl = theFile.target.result;
image.onload = function() {
let _this = this;
if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// 图片大小不正常，则进行裁剪
// 直播简介，简介要求750*（高度<3000）
if(vm.cropperIndex == 10 && _this.width < fileLimit.width) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
return
}
else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
else if(vm.cropperIndex == 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)){
vm.showCropper = true;
return;
}
if(vm.cropperIndex != 10 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
} else {
return;
}
// 图片大小不正常，则进行裁剪
else if(vm.cropperIndex != 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)) {
vm.showCropper = true;
return;
}
// 图片大小正常，则直接上传
else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function(path) {
closeLoading(vm);
console.log('上传成功后路径',path);
if (fileLimit.show == "uploadImgMessage1") {
vm.uploadImgMessage1 = false;
} else if (fileLimit.show == "uploadImgMessage2") {
vm.uploadImgMessage2 = false;
}
else if (fileLimit.show == "uploadImgMessage3") {
vm.uploadImgMessage3 = false;
// if (fileLimit.show == "uploadImgMessage1") {
// vm.uploadImgMessage1 = false;
// } else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
// else if (fileLimit.show == "uploadImgMessage3") {
// vm.uploadImgMessage3 = false;
// }
if(vm.cropperIndex == 10){
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else {
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
}
vm.$message.success("上传成功");
});
}
......@@ -679,6 +1022,71 @@
return isJPG && isLt2M;
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
// this.doUploadOSS(argument[2], 1); //封面图片
this.doUploadQiNiu(argument[2], 1);
argument[3] && argument[3].destroy();
},
// getOSSDomain(url) {
// return getOSSImgUrl(url);
// },
// （调用OSS API）开始上传
// doUploadOSS(file, index) {
// let self = this;
// //上传 指定文件名
// ossUpload(self, file, getFilePathForOSS(file), null, null, null).
// then(function(path) {
// console.log(path);
// let list = [{}];
// // list[0].name = file.name;
// // list[0].url = localStorage.getItem("resource_url") + path;
// // getOSSImgUrl(path)
// // if (index === 1) {
// // self.formData.courseIntroImage = path;
// // } else if (index === 2) {
// // self.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl = path;
// // }
//
// self.formData.cover = path;
// self.formData.imgUrl2More = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
//
// self.$message.success("上传成功");
// });
// return false;
// },
// 上传七牛
doUploadQiNiu(file, index){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
if(vm.cropperIndex == 10){
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else if(vm.cropperIndex == 20){
vm.formData.cover = path.fullPath;
}
else if(vm.cropperIndex == 30){
vm.formData.preImage = path.fullPath;
}
vm.$message.success('上传成功');
});
},
beforeUploadMore(file, fileLimit) {
let vm = this;
console.log('简介配置图上传前',file)
......@@ -695,11 +1103,11 @@
// vm.isDisabledIns = false;
return;
}
if (!isLt2M) {
vm.$message.error('图片大小不符合规范，请根据规范上传图片')
// vm.isDisabledIns = false;
return;
}
// if (!isLt2M) {
// vm.$message.error('图片大小不符合规范，请根据规范上传图片')
// // vm.isDisabledIns = false;
// return;
// }
var _img = new FileReader()
_img.readAsDataURL(file)
......@@ -709,8 +1117,9 @@
image.onload = function() {
let _this = this;
if ( _this.width != fileLimit.width || _this.height > fileLimit.height) {
vm.$message.error('图片尺寸不符合规范，请根据规范上传图片');
// vm.$message.error('图片尺寸不符合规范，请根据规范上传图片');
// vm.isDisabledIns = false;
vm.showCropper = true;
return;
}else {
openLoading(vm);
......@@ -992,16 +1401,11 @@
if(!this.checkGuests()){
return;
}
if(this.formData.guests != null & this.formData.guests.length >= 5){
this.$message.error("嘉宾最多5位！");
// this.guestErrFlag = true;
// setTimeout(function () {
// this.guestErrFlag = false;
// }, 3000)
if(this.formData.guests != null & this.formData.guests.length >= 50){
this.$message.error("嘉宾最多50位！");
}
else {
this.formData.guests.push({username: "", phone: ""});
// this.formData.guests.splice(index + 1, 0, "");
}
},
......@@ -1186,6 +1590,70 @@
},
// 视频Size转换
fileToSize(fileSize, number){
return (fileSize / 1024 / 1024).toFixed(number);
},
fileToName(fileName, fileFormat, number){
if(fileName != null && fileName != ""){
const index = fileName.indexOf(fileFormat);
const str = fileName.slice(0, index);
if(str.length > number){
return str.slice(0,number+1) + "..." + fileFormat;
}
else {
return fileName;
}
}
return fileName;
},
// 设置背景图
setBackground(){
this.dialogVisible = true;
},
// 提交设置背景图
submitBackground(){
this.dialogVisible = false;
},
handleClose(){
this.dialogVisible = false;
},
delFile(){
if(this.uploadProgress1 > 0 && this.uploadProgress1 < 100){
openLoading(this);
this.$refs.upload.abort();// 取消上传请求(element)
this.$refs.upload.clearFiles();
unsubscribe();// 取消七牛上传请求
// if(vm.videoSize > 500){
// setTimeout(() => {
// closeLoading(this);
// vm.$message.success('取消成功');
// }, 2000);
// }
// else {
// closeLoading(this);
// vm.$message.success('取消成功');
// }
closeLoading(this);
this.$message.success('取消成功');
this.uploadProgress1 = Number("0.00");
// this.uploadProgress = Number("0.00");
}
this.formData.rtcMaterial = [{
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
}];
}
},
}
</script>
......@@ -1316,4 +1784,16 @@
.guest-label .el-form-item__label{
width: 57px;
}
.radio-background{
float: left;
width: 160px;
height: 130px;
border: 2px solid #f1f7f6;
margin: 10px;
text-align: center;
}
.background-img{
width: 150px;
height: 100px;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或