wangeditor vue2 上传图片完整功能
import '@wangeditor/editor/dist/css/style.css' // 富文本编辑器样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { DomEditor } from '@wangeditor/editor'
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="正文" prop="content">
<div class="page-layer editor-outer">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 400px; overflow-y: hidden;" v-model="formLabelAlign.content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>
<!-- <el-input size="small" :rows="4" type="textarea" resize="none" v-model="formLabelAlign.content" placeholder="请输入"></el-input> -->
</el-form-item>
</el-col>
</el-row>
data() {
return {
editor: null,
toolbarConfig: {
//隐藏上传视频功能 暂时没研究。
excludeKeys: [
'insertVideo',
'uploadVideo',
'group-video'
]
},
editorConfig: {
placeholder: '请输入内容',
MENU_CONF: {
uploadImage: {
// server:放自己公司后端提供的图片上传接口
server: (process.env.NODE_ENV == 'development' ? config.serviceUrlDev : config.serviceUrlProd )+'control/file/uploadFile',
// fieldName:自己公司和后端共同约定好的接收图片接口参数名
fieldName: 'file',
// 空就是所有类型
allowedFileTypes:['image/*'],
// 拼接参数到地址上
metaWithUrl: true,
// 文件大小
maxFileSize: 10 * 1024 * 1024,
// 请求头
headers: { Authorization: this.getToken() },
// // 上传前
// 上传进度的回调函数
onProgress(progress) {
console.log('onProgress', progress)
},
onBeforeUpload(file) {
console.log(file)
// // file 选中的文件，格式如 { key: file }
// let canuseFile =['jpg', 'jpeg', 'png', 'gif'];
// let arr = file.name.split('.');
// let istrue = canuseFile.indexOf(arr[arr.length - 1]);
// if (istrue == -1) {
// this.$message.warning('错误！文件格式不支持')
// return false
// }else{
// return true
// }
},
// 单个文件上传成功之后
onSuccess(file, res) {
// insertFn(result.data)
console.log('onSuccess', file.url, res)
// let fileUrl=process.env.NODE_ENV == 'development' ? config.serviceUrlDev + config.fileService : config.serviceUrlProd + config.fileService;
// let path=fileUrl+res.data;
// console.log(path)
// insertFn(path)
// this.$notify({
// title: '操作成功',
// message: '上传成功',
// type: 'success',
// duration: 1000,
// position: 'top-left',
// });
},
// 单个文件上传失败
onFailed(file, res) {
// console.log('onFailed', file, res)
this.$notify({
title: '操作失败',
message: '上传失败',
type: 'warning',
duration: 1000,
position: 'top-left',
});
},
// 上传错误，或者触发 timeout 超时
onError(file, err, res) {
// alert(err.message)
// console.error('onError', file, err, res)
this.$notify({
title: '操作失败',
message: '上传失败',
type: 'warning',
duration: 1000,
position: 'top-left',
});
},
//重点是此方法
customInsert( result, insertFn) {
// result是返回的json格式
// 从 result 中找到 url alt href ，然后插图图片
console.log(result.data)
//我这里后端返回的不是完整地址所以需要拼接一下
let fileUrl=process.env.NODE_ENV == 'development' ? config.serviceUrlDev + config.fileService : config.serviceUrlProd + config.fileService;
let path=fileUrl+result.data;
//把完整地址穿进去
insertFn(path)
}
},
}
},
mode: 'default', // or 'simple'
},
methods：{
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
// this.toolbarConfig = {
// excludeKeys: [
// 'insertVideo',
// 'uploadVideo',
// 'group-video'
// ]
// }
},
getToken(){
let token=null;
// let token = sessionStorage.getItem('token');
if (sessionStorage.getItem('info')) {
token = JSON.parse(sessionStorage.getItem('info')).token;
}
return token;
},
},