129 lines
4.5 KiB
Markdown
129 lines
4.5 KiB
Markdown
### Upload images
|
||
|
||
#### method 1: Upload to File server
|
||
|
||
> Each time you add a image to trigger the upload
|
||
```javascript
|
||
<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  -> 
|
||
// $vm.$img2Url. The details at the end of this page
|
||
$vm.$img2Url(pos, url);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
> Multiple images unified upload
|
||
```javascript
|
||
<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  -> 
|
||
for (var img in res) {
|
||
// $vm.$img2Url. The details at the end of this page
|
||
$vm.$img2Url(img[0], img[1]);
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
```
|
||
|
||
#### method 2:base64
|
||
|
||
```javascript
|
||
<template>
|
||
<mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
|
||
</template>
|
||
exports default {
|
||
data() {
|
||
return {
|
||
mdStr: '### demo \n '
|
||
};
|
||
},
|
||
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`
|