Skip to content

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

裁剪问题等

上级 e464163b
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 5116 行增加 和 86 行删除
index.html
浏览文件 @ d2298748
......@@ -20,5 +20,6 @@
<script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
<script src="https://cdn.bootcss.com/downloadjs/1.4.8/download.min.js"></script>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-5.1.1.min.js"></script>
</body>
</html>
src/components/common/cropper.two copy.vue 0 → 100755
浏览文件 @ d2298748
<template>
<div class="rc-cropper" v-if="originImg">
<el-row>
<el-col :span="12">
<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>
</el-col>
<el-col :span="10">
<div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/>
</div>
</el-col>
</el-row>
</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()
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
canvas.width = 720
canvas.height = 480
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: false, // 是否可以通过移动鼠标来放大图像
aspectRatio: 3 / 2,
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
}
})
// this.cropper = cropper
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
this.cropper.getCroppedCanvas().toBlob(function (blob) {
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
}
</script>
<style >
.rc-cropper {
position: relative;
margin-top: 20px;
}
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
width: 720px;
height: 480px;
}
.rc-cropper__iconCrop {
position: absolute;
left: 45%;
top: 0%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
.rc-cropper__previewImg {
width: 600px;
height: 400px;
}
</style>
src/components/common/cropper.two.vue
浏览文件 @ d2298748
<template>
<div class="rc-cropper" v-if="originImg">
<el-row>
<el-col :span="12">
<el-col>
<div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
......@@ -12,11 +12,11 @@
</div>
</div>
</el-col>
<el-col :span="10">
<!-- <el-col :span="10">
<div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/>
</div>
</el-col>
</el-col> -->
</el-row>
</div>
</template>
......@@ -115,8 +115,8 @@ export default {
} */
.rc-cropper__canvasCrop2 {
width: 720px;
height: 480px;
width: 900px;
height: 760px;
}
.rc-cropper__iconCrop {
......
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ d2298748
......@@ -34,13 +34,9 @@
></el-input>
<span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<!-- <span class="edit-wrapper">
<img class="edit-img" src="../../../assets/image/phrase3/icon-pz.png" />修改信息
</span> -->
</span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span>
<span class="cancle">X</span>
<span>{{formData.courseNameCheck}}</span>
</div>
</el-col>
</el-form-item>
......@@ -58,7 +54,7 @@
</el-col>
</el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg">
<el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio>
</el-radio-group>
......@@ -66,7 +62,7 @@
<div class="basic-item-icon">
<span class="require">*</span>
<el-form-item label="课程视频：" prop="range">
<el-form-item label="课程视频：" prop="range" >
<el-upload
class="upload-video"
action="#"
......@@ -79,7 +75,7 @@
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video">
<li>
<span class="title">视频{{index + 1}}</span>
......@@ -107,6 +103,9 @@
{{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span>
</div>
<div v-show="needShowAuditMsg && !formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck" class="error-video">
<span>11{{formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck}}</span>
</div>
</li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul>
......@@ -272,7 +271,19 @@
</el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<cropper-two v-if="showCropper" :cropOption="cropOption" @getCropImg="getCropImg(arguments)" :originImg="slide2.oriUrl" :previewImg="slide2.preUrl"/>
<el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog>
<!-- <button @click="previewVideoAction">test video</button> -->
</div>
</template>
......@@ -305,14 +316,14 @@ export default {
},
showCropper: false,
cropOption: {
offset_x: 30,
offset_y: 40,
width: 600,
height: 400
offset_x: 10,
offset_y: 10,
width: 750,
height: 420
},
step: 1,
needCheckField: false,
needShowAuditMsg: false,
needShowAuditMsg: true,
needShowUploadProcess: false,
disabled: false,
formDataBase: {
......@@ -439,10 +450,10 @@ export default {
}
],
limitModel: {
maxLimitOneVideoSize: 0,
maxLimitVideoCount: 0,
maxStorageSpace: 0,
usedStorageSpace: 0
maxLimitOneVideoSize: 2147483648,
maxLimitVideoCount: 100,
maxStorageSpace: 5368709120,
usedStorageSpace: 1021842989
}
},
uploadProgress: 0,
......@@ -496,7 +507,8 @@ export default {
...mapActions(['setKind']),
getCropImg (argument) {
console.log(argument);
this.showCropper = false;
console.log(argument[0], '#####', argument[1]);
this.slide2.preUrl = argument[0]
this.cropData = argument[1]
},
......@@ -624,17 +636,26 @@ export default {
// 上传视频（mp4）
beforeUploadVideo(file) {
// orgCourseInfo.limitModel: {
// maxLimitOneVideoSize: 2147483648,
// maxLimitVideoCount: 100,
// maxStorageSpace: 5368709120,
// usedStorageSpace: 1021842989
// }
console.log(file);
const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2;
if (!isLt) {
const isGt = file.size > this.orgCourseInfo.limitModel.maxLimitOneVideoSize;
const isGtMaxNum = this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= 100;
const usedGtMaxStore = this.orgCourseInfo.limitModel.usedStorageSpace + file.size > this.orgCourseInfo.limitModel.maxStorageSpace;
if (isGt || !isMP4 || isGtMaxNum) {
this.$message.error("视频不符合规范，请根据规范上传视频");
return;
}
if (!isMP4) {
this.$message.error("视频不符合规范，请根据规范上传视频");
} else {
// openLoading(vm);
if(usedGtMaxStore) {
this.$message.error("个人存储空间已不够上传此视频");
return;
}
// 直接上传
this.needShowUploadProcess = true;
doUpload(
vm,
......@@ -660,7 +681,6 @@ export default {
vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam);
});
}
},
// 上传资源（视频）后，生存对应的节
......@@ -676,6 +696,7 @@ export default {
contentCheck: "",
resourceModel: {}
}
this.orgCourseInfo.limitModel = res.data.limitModel;
lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
}
......@@ -693,7 +714,8 @@ export default {
more: "attachmentMore1",
show: "uploadImgMessage"
};
vm.beforeAvatarUpload(file, fileLimit);
vm.beforeAvatarUpload2(file, fileLimit);
// vm.beforeAvatarUpload(file, fileLimit);
},
//上传图片校验
......@@ -892,44 +914,65 @@ export default {
// 上传课程封面图片
beforeUpload1(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
vm.doUploadOSS(file, 1); //评价图片
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 740 || _this.height != 420) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 1); //封面图片
}
}
}
},
// 上传讲师图片
beforeUpload2(file) {
const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) {
// this.$message.error("上传的图片大小不能超过 50kb");
// return;
// }
this.doUploadOSS(file, 2); //web端课程覆盖图片
// const isLt50kb = file.size / 1024 < 50;
const isJPG = file.type === 'image/jpeg'
if(!isJPG) {
this.$message.error('只支持jpeg格式')
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 88 || _this.height != 88) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 2); //封面图片
}
}
}
},
// （调用OSS API）开始上传
doUploadOSS(file, index) {
let self = this;
//如果没有选择文件,返回
// if (isEmptyUtils(file)) {
// return;
// }
// self.$message.info("开始上传");
//上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) {
let list = [{}];
list[0].name = file.name;
list[0].url = localStorage.getItem("resource_url") + path;
// list[0].name = file.name;
// list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) {
self.fileList1 = Object.assign([], list);
self.model.courseInfoUrl = path;
} else if (index === 2) {
self.fileList2 = Object.assign([], list);
self.model.appCourseUrl = path;
}
self.$message.success("上传成功");
});
......
src/style/global.scss
浏览文件 @ d2298748
......@@ -189,4 +189,10 @@
}
}
}
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
border-color: #449284 !important;
}
.el-input__inner:focus, .el-textarea__inner:focus {
border-color: #449284 !important;
}
src/utils/fetch.js
浏览文件 @ d2298748
......@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = '377D063C4A8448B2847E05074648E77F';
config.headers['token'] = '3F5F01DF814C46E59FF09F3E63A55D18';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
src/utils/oss/ossUtil.js
浏览文件 @ d2298748
......@@ -12,8 +12,13 @@ contentTypeMap.set("xlsx", "application/vnd.openxmlformats-officedocument.spread
// PICA_DEV_APP.service('ossUtil', function ($rootScope, $q) {
//获取OSS客户端
let bucketName = localStorage.getItem("bucketName");
let endpoint = localStorage.getItem("endpoint");
// let bucketName = localStorage.getItem("bucketName");
// let endpoint = localStorage.getItem("endpoint");
let bucketName = 'pica-test-huabei2';
let endpoint = 'oss-cn-beijing.aliyuncs.com';
console.log(bucketName, endpoint);
// //上传状态
// let status = false;
......@@ -34,8 +39,8 @@ const doOSSAction = () => {
//sts服务器
// let stsUrl = localStorage.getItem("stsUrl") + "/" + localStorage.getItem("token");
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/377D063C4A8448B2847E05074648E77F'
let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/D1AA498C1C1C4298B712B3678EF9BD07'
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
return new Promise(function (resolve, reject) {
fetch(stsUrl, {}, 'GET').then(function (result) {
......@@ -53,11 +58,11 @@ const doOSSAction = () => {
console.log('STS临时授权成功');
} else {
reject(result);
console.error('STS临时授权失败:', result);
console.error('STS临时授权失败222:', result);
}
}).catch(function (error) {
reject();
console.error('STS临时授权失败:', error);
console.error('STS临时授权失败111:', error);
});
});
};
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或