引入那些東西我就不說(shuō)了
要注意的是在main.js中引入的this.$axios形式的axios
在 this.editor.config.customUploadImg =async function (resultFiles, insertImgFn)這個(gè)函數(shù)中會(huì)異步
我還沒找到解決方法,目前是在當(dāng)前的組件頁(yè)面再導(dǎo)入一次axios,直接用axios.的形式就好了
首先是要后臺(tái)配置好阿里oss的密鑰啥的,
前端在上傳圖片的時(shí)候,先向后端申請(qǐng)拿來(lái)一個(gè)密鑰對(duì)象
let obj=await axios.post('http://123.123.123.123:8080/oss/policy')
obj=obj.data.data
其中obj是
{"code":200,"msg":"oss簽名",
"data":{"accessid":"LTAI4GGNjzLCbD7Yum2z3JJr",
"policy":"eyJleHBpcmF0aW9uIjoiMjAyMLCIyMDIxLTAyLTA2LyJdXX0=",
"signature":"ostNjx1Ppa1BQa+n8fnGgfWoj00=",
"dir":"2021-02-06/",
"host":"https://xxx.oss-cn-guangzhou.aliyuncs.com",
"expire":"1612599261"}}
然后把這些信息當(dāng)作屬性封裝到FormData對(duì)象里,
最后把圖像file加到FormData對(duì)象里一起上傳就好了,網(wǎng)上說(shuō)一定要最后加要上傳的圖像file不然會(huì)出錯(cuò)!
關(guān)于返回值,我沒有拿到官方說(shuō)的返回值,返回的data是空的,不過(guò)因?yàn)槲募?chǔ)存的路徑是我們自己寫的,所以通過(guò)拼接路徑的方式我們也能拿到我們需要的url,最后插入到富文本編輯器里回顯就好了
完整代碼如下
methods: {
// 初始化富文本編輯器
async creatWangEditor(){
this.editor = new E('#toolbar', '#text')
// 初始化圖片上傳
this.editor.config.customUploadImg =async function (resultFiles, insertImgFn) { // resultFiles 是 input 中選中的文件列表 insertImgFn 是獲取圖片 url 后,插入到編輯器的方法
// ?。?!這個(gè)函數(shù)中的申請(qǐng)用這個(gè)頁(yè)面導(dǎo)入的axios,不然會(huì)異步
// 獲取oss
//這個(gè)網(wǎng)址用后臺(tái)配置好的網(wǎng)址
let obj=await axios.post('http://123.123.123.123:8080/oss/policy')
obj=obj.data.data
//獲取文件路徑
// var file = $("input[type='file']").val();
//創(chuàng)建一個(gè)空對(duì)象實(shí)例
var formData = new FormData();
//獲取當(dāng)前時(shí)間戳加上獲取的文件后綴 為文件名
var filename = new Date().getTime();
//注意formData里append添加的鍵的大小寫
formData.append('key', obj.dir + filename); //存儲(chǔ)在oss的文件路徑
formData.append('OSSAccessKeyId', obj.accessid); //accessKeyId
formData.append('policy', obj.policy); //policy
formData.append('Signature', obj.signature); //簽名
// formData.append('callback', obj.callback); //不知道是啥,沒用到
formData.append('success_action_status', 200); //成功后返回的操作碼
// 將文件存入file下面,這個(gè)一定要放到最后?。?!不然會(huì)出錯(cuò)
formData.append("file", resultFiles[0]);
var url=obj.host
var fileUrl = url;
console.log(formData);
// let param = new FormData(); // 創(chuàng)建form對(duì)象
// param.append('file', resultFiles[0]); // 將文件存入file下面
let config={ // 設(shè)置請(qǐng)求頭
headers: { "Content-Type": "multipart/form-data"}
}
// 上傳文件后把url插入到文章中
let ret=await axios.post(fileUrl,formData,config)
console.log(url+obj.dir+filename);
// 根據(jù)路徑插入圖片
if(ret.status==200)
{
insertImgFn(url+'/'+obj.dir+filename)
}else{
alert("上傳圖片失敗");
}
}
// 創(chuàng)建editor
this.editor.create()
},
}