From 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 21:57:42 +0800
Subject: [PATCH] 自定义表情组件
---
src/components/mini/box10-add.vue | 265 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 217 insertions(+), 48 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index ef07260..cdab9cb 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -1,5 +1,8 @@
<template>
<div>
+ <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+ <img alt="example" style="width: 100%" :src="previewImage" />
+ </a-modal>
<a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
<a-form-model-item label="认证" prop="secret">
<a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令">
@@ -24,9 +27,9 @@
<a-form-model-item label="日志文件" v-show="!form.online">
<a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
@change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
- :data="{'fileType':fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
+ :data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt">
<a-button>
- <a-icon type="upload" />限 markdown/html
+ <a-icon type="upload" />限 md/html/txt
</a-button>
</a-upload>
</a-form-model-item>
@@ -38,11 +41,9 @@
<a-form-model-item label="分类" prop="class">
<a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
:getPopupContainer="getCalendarContainer()">
-
<a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
{{ item.typeName }}
</a-select-option>
-
</a-select>
</a-form-model-item>
@@ -58,7 +59,7 @@
</span>
</a-form-model-item>
- <a-form-model-item label=" 日志类型">
+ <a-form-model-item label=" 主类型">
<a-select v-model="form.blogType" mode="default" placeholder=""
:getPopupContainer="getCalendarContainer()">
<a-select-option value="1">
@@ -68,15 +69,67 @@
html
</a-select-option>
<a-select-option value="3">
- video
+ 视频
+ </a-select-option>
+ <a-select-option value="4">
+ 音频
</a-select-option>
<a-select-option value="5">
- fast(闪念)
+ 图组
+ </a-select-option>
+ <a-select-option value="9">
+ taking
</a-select-option>
</a-select>
</a-form-model-item>
+ <a-form-model-item label="引言" prop="introduce">
+ <a-input v-model="form.introduce" type="textarea" placeholder="限700字数" />
+ </a-form-model-item>
+
+ <a-form-model-item label="封面">
+ <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
+ :data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile"
+ :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
+ accept=".jpg,.png,.jpeg" @preview="handlePreview">
+ <!-- :disabled="form.coverFileList.length>=1" -->
+ <a-button>
+ <a-icon type="upload" />jpg/png/jpeg..
+ </a-button>
+ </a-upload>
+ <!-- <span class="myTip">
+ 自动转码,可以传高清图
+ </span> -->
+ </a-form-model-item>
+ <a-form-model-item label="图组">
+ <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture-card"
+ :data="{'bucketName':bucketName.bucket_picture}" @change="handleChangePictureFile"
+ :default-file-list="form.pictureList" :beforeUpload="beforeUploadPicture"
+ accept=".jpg,.png,.jpeg" :multiple="true" @preview="handlePreview">
+ <a-button>
+ <a-icon type="upload" />jpg/png/jpeg..
+ </a-button>
+ </a-upload>
+ </a-form-model-item>
+
+ <a-form-model-item label="视频组">
+ <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="text"
+ :data="{'bucketName':bucketName.bucket_video}" @change="handleChangeVideoFile"
+ :default-file-list="form.videoList" :beforeUpload="beforeUploadVideo" :multiple="true"
+ accept=".mp4">
+ <a-button>
+ <a-icon type="upload" />mp4
+ </a-button>
+ </a-upload>
+ </a-form-model-item>
+
+ <a-form-model-item label="定时">
+ <a-date-picker v-model="momentDate" show-time type="datetime" placeholder="发布时间"
+ style="width: 100%;" :disabledDate="disabledDate" @change="formatDate"
+ :getCalendarContainer="getCalendarContainer()" />
+ </a-form-model-item>
+
<a-form-model-item label="标签">
<template v-for="(tag, index) in tags">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
@@ -88,37 +141,14 @@
{{ tag }}
</a-tag>
</template>
-
+
<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
@keyup.enter="handleInputConfirm" />
-
+
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
<a-icon type="plus" /> New Tag
</a-tag>
-
- </a-form-model-item>
-
-
- <a-form-model-item label="封面">
- <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
- :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile"
- :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
- accept=".jpg,.png,.jpeg">
- <!-- :disabled="form.coverFileList.length>=1" -->
- <a-button>
- <a-icon type="upload" />jpg/png/jpeg..
- </a-button>
- </a-upload>
- <!-- <span class="myTip">
- 自动转码,可以传高清图
- </span> -->
- </a-form-model-item>
-
- <a-form-model-item label="定时">
- <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
- style="width: 100%;" :disabledDate="disabledDate"
- :getCalendarContainer="getCalendarContainer()" />
</a-form-model-item>
<div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
@@ -187,6 +217,16 @@
} from '../../api/blogArticleType.js'
import myConstant from "../../config/myConstant.js"
+ import md5 from 'js-md5';
+
+ function getBase64(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => resolve(reader.result);
+ reader.onerror = error => reject(error);
+ });
+ }
export default {
beforeMount() {
@@ -212,8 +252,10 @@
};
return {
- fileTypeMarkDown: myConstant.fileTypeMarkDown,
- fileTypeCover: myConstant.fileTypeCover,
+ previewVisible: false,
+ previewImage: '',
+ bucketName: myConstant.bucketName,
+ momentDate: undefined,
blogArticleType: [],
tags: [],
inputVisible: false,
@@ -225,9 +267,8 @@
span: 13
},
form: {
+ introduce: '',
secret: '',
- online: false,
- preference: false,
title: '',
content: '',
class: [],
@@ -241,8 +282,14 @@
password: "",
fileId: null,
coverFile: null,
+ pictureIds: null,
+ videoIds: null,
blogFileList: [],
coverFileList: [],
+ pictureList: [],
+ videoList: [],
+ online: false,
+ preference: false,
},
rules: {
title: [{
@@ -257,9 +304,14 @@
trigger: 'blur'
},
],
+ introduce: [{
+ max: 5,
+ message: '字数限制700',
+ trigger: 'blur'
+ }, ],
secret: [{
required: true,
- message: '不正经的人..',
+ message: '好像这里错了..',
trigger: 'blur'
}],
common: [{
@@ -287,12 +339,66 @@
};
},
methods: {
+ handleCancel() {
+ this.previewVisible = false;
+ },
+ async handlePreview(file) {
+ if (!file.url && !file.preview) {
+ file.preview = await getBase64(file.originFileObj);
+ }
+ this.previewImage = file.url || file.preview;
+ this.previewVisible = true;
+ },
reset() {
// this.form.blogFileList = [];
// this.form.coverFileList = [];
},
+ formatDate(date, dateString) {
+ this.form.publishDate = dateString;
+ },
+ beforeUploadVideo(file, fileList) {
+ return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的授权码');
+ return reject(false);
+ }
+
+ if (this.form.coverFileList.length > 10) {
+ this.$message.error('这里最多上传10个文件');
+ return reject(false);
+ }
+ if (file.size > myConstant.uploadVideoSizeLimit) {
+ this.$message.error('上传文件大小不能超过 200M!');
+ return reject(false);
+ }
+ return resolve(true)
+ });
+ },
+ beforeUploadPicture(file, fileList) {
+ return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的授权码');
+ return reject(false);
+ }
+
+ if (this.form.coverFileList.length > 10) {
+ this.$message.error('这里最多上传10个文件');
+ return reject(false);
+ }
+ if (file.size > myConstant.uploadFileSizeLimit) {
+ this.$message.error('上传文件大小不能超过 2M!');
+ return reject(false);
+ }
+ return resolve(true)
+ });
+ },
beforeUploadCover(file, fileList) {
return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的授权码');
+ return reject(false);
+ }
+
if (this.form.coverFileList.length >= 1) {
this.$message.error('这里最多上传一个文件');
return reject(false);
@@ -306,6 +412,11 @@
},
beforeUpload(file, fileList) {
return new Promise((resolve, reject) => {
+ if (this.form.secret == null || this.form.secret == "") {
+ this.$message.error('需要正确的口令..');
+ return reject(false);
+ }
+
if (this.form.blogFileList.length >= 1) {
this.$message.error('这里最多上传一个文件');
return reject(false);
@@ -327,9 +438,9 @@
}
if (info.file.status === 'done') {
this.form.fileId = info.file.response.data;
- this.$message.success(`${info.file.name} file uploaded successfully`);
+ this.$message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
- this.$message.error(`${info.file.name} file upload failed.`);
+ this.$message.error(`${info.file.name} 上传失败`);
}
if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
@@ -344,13 +455,55 @@
}
if (info.file.status === 'done') {
this.form.coverFile = info.file.response.data;
- this.$message.success(`${info.file.name} file uploaded successfully`);
+ this.$message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
- this.$message.error(`${info.file.name} file upload failed.`);
+ this.$message.error(`${info.file.name} 上传失败`);
}
if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
this.form.coverFile = null
+ }
+ },
+ handleChangePictureFile(info) {
+ this.form.pictureList = info.fileList;
+
+ if (info.file.status !== 'uploading') {
+ console.log(info.file, info.fileList);
+ }
+ if (info.file.status === 'done') {
+ if (this.form.pictureIds == null || this.form.pictureIds == "") {
+ this.form.pictureIds = info.file.response.data;
+ } else {
+ this.form.pictureIds = this.form.pictureIds + "," + info.file.response.data;
+ }
+ this.$message.success(`${info.file.name} 上传成功`);
+ } else if (info.file.status === 'error') {
+ this.$message.error(`${info.file.name} 上传失败`);
+ }
+
+ if (this.form.pictureList == null || this.form.pictureList.length == 0) {
+ this.form.pictureIds = null
+ }
+ },
+ handleChangeVideoFile(info) {
+ this.form.videoList = info.fileList;
+
+ if (info.file.status !== 'uploading') {
+ console.log(info.file, info.fileList);
+ }
+ if (info.file.status === 'done') {
+ if (this.form.videoIds == null || this.form.videoIds == "") {
+ this.form.videoIds = info.file.response.data;
+ } else {
+ this.form.videoIds = this.form.videoIds + "," + info.file.response.data
+ }
+ this.$message.success(`${info.file.name} 上传成功`);
+ } else if (info.file.status === 'error') {
+ this.$message.error(`${info.file.name} 上传失败`);
+ }
+
+ if (this.form.videoList == null || this.form.videoList.length == 0) {
+ this.form.videoIds = null
}
},
/**
@@ -359,17 +512,36 @@
customRequest(option) {
const formData = new FormData()
formData.append('file', option.file)
- formData.append('fileType', option.data.fileType)
- formData.append('authCode', this.form.secret)
+ formData.append('bucketName', option.data.bucketName)
+ formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
+ let _this = this
myFileInfoUpload(formData).then((res) => {
if (res.success) {
- this.$message.success('上传成功')
-
option.onSuccess(res, option.file)
+ // 在上传成功后进度条显示为99
+ progress.percent = 100
+ // this.$message.success('上传成功')
} else {
this.$message.error('上传失败：' + res.message)
}
})
+
+ let progress = {
+ percent: 1
+ }
+ let speed = 100 / (option.file.size / 65000) //上传速度
+ const intervalId = setInterval(() => {
+ // 控制进度条防止在未上传成功时进度条达到100
+ if (progress.percent < 99 && progress.percent + speed < 100) {
+ progress.percent += speed //控制进度条速度
+ option.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示
+ } else if ((progress.percent < 100)) {
+ progress.percent++
+ } else if (progress.percent >= 100) {
+ clearInterval(intervalId)
+ }
+ }, 500)
+
},
disabledDate(current) {
return current < moment().subtract(1, "day");
@@ -382,18 +554,15 @@
//console.log(tags);
this.tags = this.tags.filter(tag => tag !== removedTag);
},
-
showInput() {
this.inputVisible = true;
this.$nextTick(function() {
this.$refs.input.focus();
});
},
-
handleInputChange(e) {
this.inputValue = e.target.value;
},
-
handleInputConfirm() {
const inputValue = this.inputValue;
let tags = this.tags;
--
Gitblit v1.9.1