vue3使用wangeditor+上传图片限制组件

<template>
<div class="home">
<div id="richText" style="background-color: #fff"></div>
<slot name="text" />
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from "vue"
import { uploadFile } from "/@/api/message"
import { any } from "vue-types"
import E from "wangeditor"
import { ElMessage } from "element-plus"
const props = defineProps({
editorValue: {
type: String,
default: ""
},
//是否限制图片大小
limitImg: {
type: Boolean,
default: true
}
})
const emit = defineEmits(["getMsg"])
const phoneEditor = ref("")
onMounted(() => {
seteditor()
phoneEditor.value.txt.html(props.editorValue)
})
watch(
() => props.editorValue,
(newValue, oldValue) => {
// 富文本内容
if (newValue !== phoneEditor.value.txt.html()) {
phoneEditor.value.txt.html(newValue)
}
}
)
const seteditor = () => {
phoneEditor.value = new E("#richText")
if (phoneEditor.value != null) {
phoneEditor.value.destroy() //判断编辑器是否被创建，如果创建了就先销毁。
}
// 上传图片到服务器，base64形式
phoneEditor.value.config.uploadImgShowBase64 = true
// 隐藏网络图片
phoneEditor.value.config.showLinkImg = false
// 创建一个富文本编辑器
phoneEditor.value.create()
phoneEditor.value.config.uploadImgMaxSize = 10 * 1024 * 1024 //限制图片大小
phoneEditor.value.config.onchange = html => {
emit("getMsg", html)
}
if (props.limitImg) {
phoneEditor.value.config.customUploadImg = (files, insert) => {
// 富文本里的上传图片
const param = new FormData()
param.append("photos", files[0])
let reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = function (e) {
let img = new Image()
img.src = e.target.result //获取编码后的值
img.onload = function () {
// 限制图片大小
if (img.width >= 800 && img.width <= 1200) {
uploadFile("upload", param).then(res => {
// 上传图片接口
if (res.data) {
insert(res.data.httpsDomainName + res.data.uris[0])
}
})
} else {
return ElMessage.error("上传图片宽度在800-1200之间")
}
}
}
}
}
}
</script>
<style scoped></style>

最后

以上就是忐忑发夹为你收集整理的vue3使用wangeditor+上传图片限制组件的全部内容，希望文章能够帮你解决vue3使用wangeditor+上传图片限制组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。