Skip to content

P
pica.cloud.web-education-admin
提交 d2a2a0e8 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

上传讲师图片

上级 916ea0c9
隐藏空白字符变更
内嵌 并排
正在显示 包含 355 行增加 和 41 行删除
src/components/common/cropper-img copy 2.vue 0 → 100755
浏览文件 @ d2a2a0e8
<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 () {
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: false,
toggleDragModeOnDblclick: false,
// aspectRatio: 75/42,
// aspectRatio: 5/3,
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
// 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) {
let files = new window.File([blob], 'cropper.jpg');
console.log(files);
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
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__canvasCrop1 {
/* border: 1px solid red; */
width: 800px;
height: 540px;
}
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
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/common/cropper-img copy.vue 0 → 100755
浏览文件 @ d2a2a0e8
<template>
<div class="rc-cropper" v-if="originImg">
<div class="rc-cropper__canvasCrop2">
<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
},
previewImg: {
type: String
}
},
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
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 () {
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: false,
toggleDragModeOnDblclick: false,
// aspectRatio: 75/42,
// aspectRatio: 5/3,
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
// 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) {
let files = new window.File([blob], 'cropper.jpg');
console.log(files);
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
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 {
// position: relative;
// margin-top: 10px;
// img {
// width: 100%;
// height: 100%;
// }
// }
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
width: 800px;
height: 540px;
}
.rc-cropper__iconCrop {
position: absolute;
/* left: 8%; */
left: 46%;
top: 10%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
src/components/common/cropper-img.vue
浏览文件 @ d2a2a0e8
<template> <template>
<div class="rc-cropper" v-if="originImg"> <div class="rc-cropper" v-if="originImg">
<div class="rc-cropper__canvasCrop2"> <div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper"> <img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/> <canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop"> <div class="rc-cropper__iconCrop">
...@@ -25,9 +25,6 @@ export default { ...@@ -25,9 +25,6 @@ export default {
originImg: { originImg: {
required: true required: true
}, },
previewImg: {
type: String
}
}, },
data () { data () {
return { return {
...@@ -48,8 +45,10 @@ export default { ...@@ -48,8 +45,10 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
let canvas = document.getElementById(this.originImg) let canvas = document.getElementById(this.originImg)
if (canvas) { if (canvas) {
canvas.width = 1000 // canvas.width = 1000
canvas.height = 800 // canvas.height = 800
canvas.width = _this.cropOption.cvWidth;
canvas.height = _this.cropOption.cvHeight;
let ctx = canvas.getContext('2d') let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image() let img = new Image()
...@@ -120,31 +119,24 @@ export default { ...@@ -120,31 +119,24 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// .rc-cropper {
// position: relative;
// margin-top: 10px;
// img {
// width: 100%;
// height: 100%;
// }
// }
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 { .rc-cropper__canvasCrop1 {
/* border: 1px solid red; */ /* border: 1px solid red; */
width: 800px; width: 800px;
height: 540px; height: 540px;
} }
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
width: 400px;
height: 300px;
}
.rc-cropper__iconCrop { .rc-cropper__iconCrop {
position: absolute; position: absolute;
/* left: 8%; */ // left: 46%;
left: 46%; right: 13%;
top: 10%; top: 15%;
} }
.el-tooltip { .el-tooltip {
......
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ d2a2a0e8
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
ref="testDialogRef" ref="testDialogRef"
title="上传课程" title="上传课程"
:visible="dialogVisible" :visible="dialogVisible"
@close="backToOrgCourse" @close="close"
center center
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
:show-file-list="false" :show-file-list="false"
:disabled="needShowUploadProcess || (formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= orgCourseInfo.limitModel.maxLimitVideoCount)" :disabled="needShowUploadProcess || (formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= orgCourseInfo.limitModel.maxLimitVideoCount)"
> >
<el-button slot="trigger" ref="uploadFileBtn" size="small" type="primary">点击上传</el-button> <el-button slot="trigger" ref="uploadFileBtn" size="small" type="primary"><img style="width:12px;height:12px;position:relative;top:1px;" src="../../../assets/image/phrase3/icon-upload.png" /> <span style="font-size:14px;"> 上传文件</span></el-button>
<div slot="tip" class="el-upload__tip"> <div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span> <span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list"> <ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
:before-upload="beforeUploadVideo" :before-upload="beforeUploadVideo"
:show-file-list="false" :show-file-list="false"
> >
<img @click="replaceLecture(index)" class="replace" src="../../../assets/image/phrase3/close.png" /> <img @click="replaceLecture(index)" class="replace" src="../../../assets/image/phrase3/replace.png" />
</el-upload> </el-upload>
</div> </div>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" /> <img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
...@@ -141,8 +141,8 @@ ...@@ -141,8 +141,8 @@
</li> </li>
</ul> </ul>
<div style="color:red;position:absolute;top:60px;" v-if="noLecture && !formData.courseCustomChapterModels[0].courseCustomLectureModelList.length">请上传课程视频</div> <div style="color:red;position:absolute;top:60px;" v-if="noLecture && !formData.courseCustomChapterModels[0].courseCustomLectureModelList.length">请上传课程视频</div>
<div v-show="needShowUploadProcess" style="position:absolute;top:10px;left:90px;display:flex;"> <div v-show="needShowUploadProcess" style="position:absolute;top:10px;left:100px;display:flex;">
<div style="flex:1;width: 360px;"> <div style="flex:1;width: 358px;">
<span class="upload-process" :style="{'width': (uploadProgress/100 * 300) + 'px'}"></span> <span class="upload-process" :style="{'width': (uploadProgress/100 * 300) + 'px'}"></span>
</div> </div>
<img @click="cancleUpload" style="widht:16px;height:16px;margin-top:3px;margin-left:8px;" src="../../../assets/image/phrase3/close.png" /> <img @click="cancleUpload" style="widht:16px;height:16px;margin-top:3px;margin-left:8px;" src="../../../assets/image/phrase3/close.png" />
...@@ -333,7 +333,7 @@ ...@@ -333,7 +333,7 @@
<el-dialog <el-dialog
title="图片裁剪" title="图片裁剪"
:visible.sync="showCropper" :visible.sync="showCropper"
width="900px" :width="currentOption.cropDialogWidth"
center> center>
<div slot="title" style="text-align: left;"> <div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span> <span style="font-weight: 700;">图片裁剪</span>
...@@ -367,23 +367,36 @@ export default { ...@@ -367,23 +367,36 @@ export default {
oriUrl: '', // 原图 oriUrl: '', // 原图
}, },
showCropper: false, showCropper: false,
currentOption: { currentOption: {
offset_x: 120, offset_x: 120,
offset_y: 185, offset_y: 185,
width: 750, width: 750,
height: 420 height: 420,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px'
}, },
cropOption: { cropOption: {
offset_x: 120, offset_x: 120,
offset_y: 185, offset_y: 185,
width: 750, width: 750,
height: 420 height: 420,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px'
}, },
cropOption2: { cropOption2: {
offset_x: 450, offset_x: 80,
offset_y: 350, offset_y: 60,
width: 88, width: 88,
height: 88 height: 88,
cvWidth: 249,
cvHeight: 200,
uploadType: 2,
cropDialogWidth: '500px'
}, },
isReplaceUpload: false, isReplaceUpload: false,
replaceLectureIndex: 0, replaceLectureIndex: 0,
...@@ -578,11 +591,11 @@ export default { ...@@ -578,11 +591,11 @@ export default {
cancleUpload() { cancleUpload() {
console.log('in cancleUpload'); console.log('in cancleUpload');
if(window.QNSubscription) { if(window.QNSubscription) {
console.log('QNSubscription', QNSubscription); // console.log('QNSubscription', QNSubscription);
window.QNSubscription.unsubscribe(); // window.QNSubscription.unsubscribe();
window.QNSubscription = null; // window.QNSubscription = null;
} }
this.$refs.uploadFileCom.abort(); // this.$refs.uploadFileCom.abort();
}, },
querySearch(queryString, cb) { querySearch(queryString, cb) {
...@@ -982,7 +995,8 @@ export default { ...@@ -982,7 +995,8 @@ export default {
} }
.custom-list { .custom-list {
position: relative; position: relative;
left: -78px; left: 0px;
// left: -78px;
width: 580px; width: 580px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/utils/qiniu-util.js
浏览文件 @ d2a2a0e8
...@@ -260,8 +260,6 @@ export const qiniuUpload = (self, file, filePath, previewId, progressId) => { ...@@ -260,8 +260,6 @@ export const qiniuUpload = (self, file, filePath, previewId, progressId) => {
}); });
console.log(22222);
window.QNSubscription = subscription;
// return deferred.promise; // return deferred.promise;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或