wangEditor+vue上传图片到阿里云配置
2023-12-14 01:42:29
1.下载七牛云
// 下载qiniu-js
npm install qiniu-js
// 在页面中引入
import * as qiniu from 'qiniu-js'
2.首先创建一个MyWangEditor的组件
<template lang="html">
<div class="editor">
<div ref="toolbar" class="toolbar"></div>
<div ref="editor" class="text" :style="{ minHeight: h, width: w }"></div>
</div>
</template>
<script>
import E from "wangeditor";
import { GetqiniuToken } from "@/api/article";//获取七牛云token接口
import * as qiniu from "qiniu-js";
let imgUrl = "";
export default {
name: "editor",
props: {
w: {
type: String,
default: "100%",
},
h: {
type: String,
default: "600px",
},
value: {
type: String,
default: "",
},
isClear: {
type: Boolean,
default: false,
},
},
data() {
return {
QiniuData: { token: "" },
getToken: "",
action: imgUrl + "接口地址",
editor: null,
info_: null,
menus: [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"indent", //缩进
"lineHeight", //行高
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
// "todo", //待办事项
// "code", // 插入代码
// "video",
"undo", // 撤销
"redo", // 重复
"splitLine", //分割线
"fullscreen", // 全屏
"tableHeader", // 表头
"tableFullWidth", // 宽度自适应
],
colors: [
"#000000",
"#ffffff",
"#eeece0",
"#1c487f",
"#4d80bf",
"#c24f4a",
"#8baa4a",
"#7b5ba1",
"#46acc8",
"#f9963b",
"#FF0000",
"#00FF00",
"#0000FF",
"#FF00FF",
"#00FFFF",
"#FFFF00",
"#000000",
"#70DB93",
"#5C3317",
"#9F5F9F",
"#B5A642",
"#D9D919",
"#A67D3D",
"#8C7853",
"#A67D3D",
"#5F9F9F",
"#D98719",
"#B87333",
],
};
},
model: {
prop: "value",
event: "change",
},
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {
this.editor.txt.clear();
this.info_ = null;
}
},
value: function (value) {
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value);
}
},
//value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
},
computed: {},
created() {},
mounted() {
GetqiniuToken().then((res) => {
console.log("提交", res);
this.getToken = res.token;
});
this.seteditor();
this.editor.txt.html(this.value);
},
methods: {
handleRemove(file, fileList) {
this.emitInput(fileList);
},
// console.log(sayHello());
// 打印的是promise对象:Promise{<fulfilled>: 'hello world'}
// 因为是个promise对象,则需要使用.then获取promise的返回值
// 以上打印的顺序:先打印 123 再打印 'hello world'
// },
seteditor() {
this.editor = new E(this.$refs.toolbar, this.$refs.editor);
this.editor.customConfig = this.editor.customConfig
? this.editor.customConfig
: this.editor.config;
this.editor.customConfig.menus = this.menus;
// 上传图片
this.editor.customConfig.uploadImgShowBase64 = false; //如果为true,则不用配置下面的
this.editor.customConfig.pasteIgnoreImg = false; //忽略粘贴的图片
this.editor.customConfig.pasteFilterStyle = false; //关闭样式过滤
// 配置行高
this.editor.customConfig.lineHeights = [
"1",
"1.15",
"1.6",
"2",
"2.5",
"3",
];
// 配置颜色(文字颜色、背景色)
this.editor.customConfig.colors = this.colors;
console.log("请求", this.editor.customConfig);
this.editor.customConfig.uploadImgHeaders = {
Authorization: this.getToken,
}; // 设置请求头
// 上传图片
// 上传到七牛云
let that = this;
this.editor.customConfig.customUploadImg = function (
resultFiles,
insertImgFn
) {
console.log("resultFiles", resultFiles);
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
//有可能会上传多张图片,上传多张图片就需要进行遍历
resultFiles.map((item) => {
console.log("上传图片", item, insertImgFn);
// _this.getUploadImg(item, insertImgFn);
that.getUploadFile(item, insertImgFn);
});
};
//可使用监听函数在上传图片的不同阶段做相应处理
this.editor.customConfig.uploadImgHooks = {
//服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错
customInsert: function (insertImg, result, editor) {
if (result.code == 200) {
console.log("图片上传了嘛", insertImg, result, editor);
const link = result.data;
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
insertImg(link); // result 必须是一个 JSON 格式字符串!!!否则报错
} else {
this.$message({
message: result.message,
type: "warning",
});
}
},
};
// 配置菜单
//连接
(this.editor.customConfig.linkCheck = function (text, link) {
console.log("插入的文字", text); // 插入的文字
console.log("插入的链接", link); // 插入的链接
return true; // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
}),
(this.editor.customConfig.onchange = (html) => {
this.info_ = html; // 绑定当前逐渐地值
this.$emit("change", this.info_); // 将内容同步到父组件中
});
// 创建富文本编辑器
this.editor.create();
},
// 上传图片/视频到七牛云
getUploadFile(file, Rendering) {
// 获取七牛云的token
GetqiniuToken().then((res) => {
this.QiniuData.token = res.token;
//配置信息
var config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false
};
//额外的信息
var putExtra = {
// fname: "", //文件原文件名
// params: {}, //object,用来放置自定义变量
// mimeType: null, // null || array,用来限定上传文件类型,指定null时自动判断文件类型
};
let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取后缀
// 设置唯一的文件名
const key =
"cwfile/" + new Date().getTime() + "_" + file.size + file.name;
/**
* file: Blob 对象,上传的文件
* key: 文件资源名
* token: 上传验证信息,前端通过接口请求后端获得
* config: object
* putExtra
*/
// file:图片数据;key:图片名称;token:服务端获取的token;putExtra:额外的参数;config:其他配置
const observable = qiniu.upload(
file,
key,
this.QiniuData.token,
putExtra,
config
);
// 文件上传
var observer = {
// 正在上传 接收上传进度信息
next(res) {
// 上传进度 parseInt(res.total.percent)
console.log("next-res", res, parseInt(res.total.percent));
// if(parseInt(res.total.percent)==100){
// console.log("success")
// }
},
// 接收上传错误信息
error(err) {
console.log(err);
this.$message.error("文件上传失败");
},
// 接收上传完成后的信息
complete(res) {
console.log("complete-res", res);
Rendering("https://cyvideo.i-oranges.com/" + res.key);
},
};
var subscription = observable.subscribe(observer); // 上传开始
});
},
},
};
</script>
<style lang="css">
.videoWarp {
display: flex;
justify-content: flex-end;
}
.warp {
display: inline-block;
position: relative;
top: 42px;
/* left: 98px; */
z-index: 100000;
width: 67px;
height: 36px;
border: 1px border #dee5ed;
/* background-color: #409EFF; */
/* color: white; */
font-weight: bold;
border-radius: 10px 10px;
}
.editor {
width: 90%;
/* margin: 0 auto; */
position: relative;
z-index: 0;
}
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
min-height: 500px;
}
</style>
3.页面引入组件
<my-wangeditor
v-model="form.activityImg"
:isClear="isClear"
@change="changeImg"
></my-wangeditor>
import myWangeditor from "@/components/MyWangEditor.vue";
export default {
components: { myWangeditor },
data() {
return {
form:{
activityImg :' '
}
}
},
methods: {
changeImg(e) {
console.log("上传", e);
this.form.activityImg = e;
},
}
}
文章来源:https://blog.csdn.net/oneya1/article/details/134849830
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!