富文本编辑器前端图片直传oss

使用的wangeditor ,踩了一天的坑，终于OK

vue+element + wangeditor

npm i wangeditor 

<<template>

<div class='warp'>

 

<div id="editorElem" class="toolbar" ></div>

<div id="div2" class="text">

</div>

 

</div>

</template>>

<script>

import E from "wangeditor";

import { getOliInfo} from "../../api/api";

import axios from "axios";

 

export default {

name: "editor",

 

data() {

return {

aliyun: {},

editorContent: ""

};

},

 

methods: {

aliyun(){

//向后台发起请求获得accessid、policy等参数，并赋值给data中的定义的aliyun对象

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

},

 

mounted() {

var that = this;

 

this.aliyunKey();//请求后台获得key host之类的信息，

var editor = new E("#editorElem","#div2");//第一个是操作栏，第二部分是富文本编辑区域，目的是为了css设置编辑区的高度

 

editor.customConfig.onchange = html => {

this.editorContent = html;

console.log(html)//这个值是富文本生成的值，要传给数据库

};

 

 

editor.customConfig.customUploadImg = function(file, insert) {//这个要放在editor.create();之前，放在之后获取不到上传的文件

var server = that.aliyun.host;

var ossData = new FormData();

var time = new Date().getTime();

var keyname = that.aliyun.dir + "/" + time + ".jpg";

ossData.append("key", keyname);

ossData.append("policy", that.aliyun.policy);

ossData.append("OSSAccessKeyId", that.aliyun.accessid);

ossData.append("success_action_status", 201);

ossData.append("signature", that.aliyun.signature);

console.log(file[0],file[0].name)

ossData.append("file", file[0], file[0].name);

//上一部分是直传oss 的格式，后面的参数为后端返回的一一对应，值得注意的是与element upload上传插件有所不同，得到的file是数组，upload是一个对象，里面的file也是一个对象，不能用...的方式获得，因此使用了file[0]

axios.post(server, ossData).then(res => {

var img = server + "/" + keyname;

//阿里云上传成功返回的是xml,为了得到https图片的地址使用拼接的方式得到img

console.log(img)

insert(img)//将https的图片插到富文本编辑器中

});

 

 

};

editor.create();

//总结起来，wangeditor 简单方便，前端直传减轻了服务器的压力，整体操作虽然遇到了很多问题，但是最终还是感觉代码挺简单，思路也比较清晰。获得file文件，调用上传方法，得到http地址图片放在富文本中，而上传方法要有

}

};