首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue2编辑器的使用图片上传的坑

Vue2编辑器的使用图片上传的坑

作者头像
热情仔
修改2020-03-12 10:06:23
1.3K0
修改2020-03-12 10:06:23
举报
<template>
  <div id="app">
  //注意image-added不要用驼峰有可能不好使
    <vue-editor id="editor" useCustomImageHandler @image-added="handleImageAdded" v-model="htmlForEditor"> </vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import axios from "axios";
export default {
  components: {
    VueEditor
  },

  data() {
    return {
      htmlForEditor: ""
    };
  },

  methods: {
    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData();
      formData.append("image", file);

      axios({
        url: "https://fakeapi.yoursite.com/images",
        method: "POST",
        data: formData
      })
        .then(result => {
          let url = result.data.url; // Get url from response接收图片返回的地址
          Editor.insertEmbed(cursorLocation, "image", url);//存入这个编译器中
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档