upload-images.md

Upload images

method 1: Upload to File server

Each time you add a image to trigger the upload

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // bind @imgAdd event
        $imgAdd(pos, $file){
           / step 1. upload image to server.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // step 2. replace url ![...](./0) -> ![...](url)
               // $vm.$img2Url. The details at the end of this page
               $vm.$img2Url(pos, url);
           })
        }
    }
}

Multiple images unified upload

<template>
    <button @click="uploadimg">upload</button>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data(){
        return {
            img_file: {}
        }
    },
    methods: {
        // bind @imgAdd event
        $imgAdd(pos, $file){
            // cache images info
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
            delete this.img_file[pos];
        },
        uploadimg($e){
           // step 1. upload images to server.
            var formdata = new FormData();
            for(var _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * eg：res = [[pos, url], [pos, url]...]
                 */
                // step 2. replace url ![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url. The details at the end of this page
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    }
}

method 2:base64

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data() {
        return {
            mdStr: '### demo \n ![image](./0)'
        };
    },
    mounted() {
        // init: replace <img src="base64">
        this.$nextTick(() => {
            // $vm.$imgUpdateByUrl. The details at the end of this page
            $vm.$imgUpdateByUrl('./0', base64);
        }
    },
    methods: {
        $imgAdd(pos, $file){
            // upload image(base64)
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((flag) => {
           })
        }
    }
}

image methods

name	params	describe
$vm.$refs.toolbar_left.$imgDelByFilename(>=2.1.6)	String: filename	Delete the image by filename, return true if sucess, false otherwise, (and it will remove from md (>=2.4.16))
$vm.$refs.toolbar_left.$imgAddByFilename(>=2.1.6)	String: filename, File: file	Add the image by filename (The filename alias style must be "./filename"), return true if sucess, false otherwise
$vm.$refs.toolbar_left.$imgUpdateByFilename(>=2.1.6)	String: filename, File: file	Update the image by filename(The filename alias style must be "./filename"), return true if sucess, false otherwise
$vm.$imgUpdateByUrl(>=2.1.6)	String: filename, String: url	Update filename to url(example: ./0 -> http://path/to/png/some.png)
$vm.$imgAddByUrl(>=2.1.11)	String: filename, String: url	Same as above
$vm.$img2Url(>=2.1.11)	String: filename, String: url	replace filename to url(example:  -> )
$vm.$imglst2Url(>=2.1.11)	Array: filenameLst	Same as above(filenameLst: [[filename, url], ...])

Notice: $vm => reference instance of component, you can get it:

1. import {mavonEditor} from ...: $vm == mavonEditor
2. <mavon-editor ref=md ></mavon-editor>: $vm==this.$refs.md`