vue中的富文本编辑器,vue2-editor, 使用 use-custom-image-handler 自定义图片上传的时候 @imageAdded 不触发,无效;
<!-- @imageAdded="handleImageAdded" 这里不要使用驼峰,否则无法触发此事件-->
要用 @image-added="handleImageAdded" 才行...
<template>
<vue-editor
v-model="editorVal"
use-custom-image-handler
@image-added="handleImageAdded"
/>
<!-- @imageAdded="handleImageAdded" 这里不要使用驼峰,否则无法触发此事件-->
</template>
<script>
import { VueEditor } from 'vue2-editor';
// import fileUpload from '@/common/method/file.upload';
export default {
components: { VueEditor },
model: {
prop: 'text',
event: 'changeEditor'
},
props: {
text: {
required: false,
type: [String],
default: null
}
},
data() {
return {
editorVal: null,
uploadConf: {
region: null,
accessKeyId: null,
accessKeySecret: null,
bucket: null,
stsToken: null,
qiNiuToken: null,
imgUrl: null,
type: null
}
};
},
watch: {
editorVal(val) {
// console.log(val);
this.$emit('changeEditor', val);
},
text(val) {
this.editorVal = this.text;
}
},
created() {
this.editorVal = this.text;
},
methods: {
/**
* 图片上传操作
*/
handleImageAdded(file, Editor, cursorLocation, resetUploader) {
console.log(file);
// fileUpload(file).then(({ saveName, savePath }) => {
// //把获取到的图片url 插入到鼠标所在位置 回显图片
// Editor.insertEmbed(cursorLocation, 'image', `${this.$APP_STATIC}${saveName}${savePath}`);
// resetUploader();
// }).catch((error) => {
// console.error(error);
// });
}
}
};
</script>
file.upload.js
/**
* 单文件上传
* @param file 文件对象
* @param params 额外参数
*/
import { uploadFile } from '@/http';
export default (file, params) => {
return new Promise(async (resolve, reject) => {
try {
console.log(file);
let fm = new FormData();
fm.append('file', file);
const { code, data } = await uploadFile({ data: fm, params });
console.log(code);
if (code == 200) {
resolve(data);
}
} catch (error) {
console.error(error);
reject(error);
}
});
};