vue2-editor 富文本编辑器图片上传

簡一

已于 2022-06-02 14:56:53 修改

阅读量776

点赞数

文章标签： Vue vue2-editor 富文本编辑器图片上传前端开发

于 2022-06-02 14:52:27 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45651008/article/details/125100615

版权

//html
      <el-form-item label="详情">
             <vue-editor
               v-model="formData.body"
               useCustomImageHandler // 富文上传图片
               @image-added="handleImageAdded" //富文上传图片
             ></vue-editor>
        </el-form-item>

npm install vue2-editor   //安装富文本vue2-editor
//在需要的页面引入
import { VueEditor } from "vue2-editor";

export default{
  components: {
    VueEditor,
  },
  methods:{
	  // 图片上传
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData();
      formData.append("file", file);
      const res = await uploads(formData)
        console.log(res);
          Editor.insertEmbed(cursorLocation, "image", res.data.url);
          resetUploader();
    },

}

}