在vue中使用axios+wangEditor上傳圖片到阿里oss

引入那些東西我就不說(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()
    },
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容