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

代码语言：javascript复制

<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>

编辑器 图片上传

0 人点赞