Vue中使用mavon-editor

Vue中使用mavon-editor

1.安装mavon-editor

cnpm install mavon-editor -- save

2.再Vue的页面中使用标签

<mavon-editor ref="md"  @change="change" @imgAdd="imgAdd"></mavon-editor>

3.Vue的 js 中

<script>
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
 
 
export default{
    components:{
        mavonEditor
    },
    method:{
        change(value, render){
            //实时获取转成html的数据
            this.html = render
            console.log(this.html)
        },
        imgAdd(pos, $file){
            let form_data = new FormData()
            form_data.append('pic', $file)
 
 
            axios({
                url:'',
                method:'post',
                data:form_data
            }).then(res=>{
                // 用后端返回回来的url替换前端的图片url
                this.$refs.md.$img2Url(pos, res.data.url)
                // this.$refs.md[0].$img2Url(pos, res.data.url)  有时候会有这种情况
            })
        }
    }
}
</script>

python后端

# 上传文件
def upload_Pic(request):
    # 根name取 file 的值
    file = request.FILES.get('picture')
    # 创建upload文件夹
    if not os.path.exists(settings.MEDIA_ROOT):
        os.makedirs(settings.MEDIA_ROOT)
    try:
        if file is None:
            return HttpResponse('请选择要上传的文件')
        # 循环二进制写入
        url = str(uuid.uuid3(uuid.NAMESPACE_DNS, 'python.org')) + file.name
        with open(settings.MEDIA_ROOT + "/" + url, 'wb') as f:
            for i in file.readlines():
                f.write(i)
    except Exception as e:
        return HttpResponse(e)
    else:
        data = {'status': '200', 'success': 1, 'message': '图片上传成功', 'url': '/media' + '/' + url}
        return JsonResponse(data, content_type="text/html")