|
|
@@ -38,21 +38,31 @@
|
|
|
<el-row v-show="form.source === 'edit'">
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="内容" prop="content" maxlength="30">
|
|
|
+ <!-- 图片上传 -->
|
|
|
<el-upload
|
|
|
class="upload-demo"
|
|
|
- action="http://8.135.106.227:8001/manage/activity/upload"
|
|
|
+ action="http://8.135.106.227:8001/manage/news/upload"
|
|
|
+ multiple
|
|
|
+ :headers="headerObj"
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="upload_thumb_successImg"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">图片上传</el-button>
|
|
|
+ <span class="fwbtit">支持png、jpg、gif和jpeg的图片格式；最大支持5M</span>
|
|
|
+ </el-upload>
|
|
|
+ <!-- 视频上传 -->
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action="http://8.135.106.227:8001/manage/news/upload"
|
|
|
multiple
|
|
|
:before-upload="beforethumbUpload"
|
|
|
:on-success="upload_thumb_success"
|
|
|
:headers="headerObj"
|
|
|
>
|
|
|
<el-button size="small" type="primary">视频上传</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 只能上传MP4文件，且不超过500M
|
|
|
- </div>
|
|
|
+ <span class="fwbtit">只能上传MP4文件，且不超过500M</span>
|
|
|
</el-upload>
|
|
|
-
|
|
|
- <div id="div2" style="z-index: 1;margin-top: 40px;"></div>
|
|
|
+ <div id="div2" style="z-index: 1; margin-top: 40px"></div>
|
|
|
<!-- <vue-editor class="quill-editor" v-model="form.content" /> -->
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -103,7 +113,10 @@ export default {
|
|
|
wxUrl: "",
|
|
|
},
|
|
|
rules: {
|
|
|
- name: [{ required: true, message: "请输入标题", trigger: "blur" },{ max: 32, message: '不能超过32个字', trigger: 'blur' }],
|
|
|
+ name: [
|
|
|
+ { required: true, message: "请输入标题", trigger: "blur" },
|
|
|
+ { max: 32, message: "不能超过32个字", trigger: "blur" },
|
|
|
+ ],
|
|
|
type: [{ required: true, message: "请选择类别", trigger: "blur" }],
|
|
|
source: [{ required: true, message: "请选择来源", trigger: "blur" }],
|
|
|
// content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
|
|
@@ -127,32 +140,66 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
- beforethumbUpload (file) {
|
|
|
- // console.log('上传文件前校验', file)
|
|
|
+ // 上传图片
|
|
|
+ beforethumbUploadImg (file) {
|
|
|
+ // console.log(998, file)
|
|
|
// 限制图片大小和格式
|
|
|
- const sizeOk = file.size / 1024 / 1024 < 500
|
|
|
- const typeOk = file.type === 'video/mp4'
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 5
|
|
|
+ const typeOk =
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ file.type === 'image/jpeg' ||
|
|
|
+ file.type === 'image/gif'
|
|
|
+
|
|
|
return new Promise((resolve, reject) => {
|
|
|
if (!typeOk) {
|
|
|
- this.$message.error('视频格式有误！')
|
|
|
+ this.$message.error('照片格式有误！')
|
|
|
reject(file)
|
|
|
} else if (!sizeOk) {
|
|
|
- this.$message.error('视频大小超过500M！')
|
|
|
+ this.$message.error('照片大小超过5M！')
|
|
|
+ reject(file)
|
|
|
+ } else if (file.name.length > 32) {
|
|
|
+ this.$message.error('照片名字不能超过32个字！')
|
|
|
reject(file)
|
|
|
} else {
|
|
|
resolve(file)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- upload_thumb_success (data) {
|
|
|
- console.log('上传文件成功', data)
|
|
|
- this.$message.success('上传成功')
|
|
|
+ upload_thumb_successImg (data) {
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ console.log('图片上传成功', data)
|
|
|
+ this.editor.txt.append(
|
|
|
+ `<img src="${data.data.ossUrl}" style="max-width:100%" /><p>  </p>`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ beforethumbUpload(file) {
|
|
|
+ // console.log('上传文件前校验', file)
|
|
|
+ // 限制视频大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 500;
|
|
|
+ const typeOk = file.type === "video/mp4";
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error("视频格式有误！");
|
|
|
+ reject(file);
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error("视频大小超过500M！");
|
|
|
+ reject(file);
|
|
|
+ } else {
|
|
|
+ resolve(file);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upload_thumb_success(data) {
|
|
|
+ console.log("上传文件成功", data);
|
|
|
+ this.$message.success("上传成功");
|
|
|
// this.editor.txt.html(`${this.editor.txt.html()}<p><video src="${data.data.ossUrl}" controls style="width:50%"></video></p>`);
|
|
|
-
|
|
|
- this.editor.txt.append(`<video src="${data.data.ossUrl}" controls style="width:100%"></video><p>  </p>`)
|
|
|
+
|
|
|
+ this.editor.txt.append(
|
|
|
+ `<video src="${data.data.ossUrl}" controls style="width:100%"></video><p>  </p>`
|
|
|
+ );
|
|
|
// this.editor.txt.append(`<p>123456</p>`)
|
|
|
- },
|
|
|
- //上传视频方法
|
|
|
+ },
|
|
|
+ //上传视频方法
|
|
|
quxiao(reload) {
|
|
|
this.$layer.close(this.layerid);
|
|
|
//点击取消 不刷新列表 点击确认 保存成功刷新列表
|
|
|
@@ -177,9 +224,8 @@ export default {
|
|
|
if (this.form.source === "edit") {
|
|
|
data.content = this.editor.txt.html();
|
|
|
//把微信链接变成空
|
|
|
- data.wxUrl=''
|
|
|
- }
|
|
|
- else data.content = "";
|
|
|
+ data.wxUrl = "";
|
|
|
+ } else data.content = "";
|
|
|
// console.log(666,data);
|
|
|
if (data.content === undefined) data.content = " ";
|
|
|
let result = await this.$http({
|
|
|
@@ -217,7 +263,6 @@ export default {
|
|
|
"Verdana",
|
|
|
"Times New Roman",
|
|
|
];
|
|
|
- this.editor.config.uploadImgShowBase64 = true; //图片地址
|
|
|
this.editor.create();
|
|
|
this.editor.txt.html(this.iframeData.content);
|
|
|
}, 100);
|
|
|
@@ -228,16 +273,15 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
created() {},
|
|
|
- mounted() {
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-/deep/.el-upload-list__item-name{
|
|
|
+/deep/.el-upload-list__item-name {
|
|
|
display: none !important;
|
|
|
}
|
|
|
-/deep/.el-upload-list__item-status-label{
|
|
|
+/deep/.el-upload-list__item-status-label {
|
|
|
display: none !important;
|
|
|
}
|
|
|
// /deep/.el-icon-close{
|
