vue + tinymce上傳圖片到七牛以及圖片批量上傳

此文基於之前博文vue使用tinymce5富文本編輯器

圖片批量上傳插件來自Tinymce5 ax多圖片批量上傳插件

一、上傳圖片到七牛雲

1.安裝圖片上傳以及圖片批量上傳插件

import "tinymce/plugins/image";
import "tinymce/plugins/axupimgs";

2.在toolbar和plugins中使用這兩個插件,使用自定義圖片上傳方法

plugins:"image axupimgs",
toolbar:"image axupimgs"

3.在data中存入七牛雲所需的數據

data:function{
	return {
	  QiniuData: {
        key: "", //圖片名字處理
        token: "" //七牛雲token
      },
      domain: "http://upload.qiniup.com", // 七牛雲的上傳地址
      qiniuaddr: "http://img.example.com" // 七牛雲的圖片外鏈地址
	}
}

4.獲取token，自定義圖片上傳方法

getQiniuToken() {
      this.$http({
        url: this.$http.adornUrl("/lesson/file/qiniu-token"),
        method: "get"
      })
        .then(res => {
          this.QiniuData.token = res.data.token;
        })
        .catch(error => {});
    },
    imgUpload(blobInfo, success, failure) {
      const axiosInstance = axios.create({ withCredentials: false }); //withCredentials 禁止攜帶cookie，帶cookie在七牛上有可能出現跨域問題
      let data = new FormData();
      data.append("token", this.QiniuData.token); //七牛需要的token，叫後臺給，是七牛賬號密碼等組成的hash
      data.append("file", blobInfo.blob());
      axiosInstance({
        method: "POST",
        url: this.domain, //上傳地址
        data: data,
        timeout: 30000, //超時時間，因爲圖片上傳有可能需要很久
        onUploadProgress: progressEvent => {
          //imgLoadPercent 是上傳進度，可以用來添加進度條
          let imgLoadPercent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      })
        .then(data => {
		  // 調用成功回調，返回用七牛外鏈地址和返回的key拼接的圖片路徑
          success(`${this.qiniuaddr}/${data.data.key}`);
        })
        .catch(function(err) {
          //上傳失敗
        });
    }

5.調用方法

mounted:function(){
	this.getQiniuToken();
},
data(){
	init:{
		images_upload_handler: (blobInfo, success, failure) => {
          this.imgUpload(blobInfo, success, failure);
        }
	}
}

二、圖片批量上傳

1.此插件基於image插件，仍舊調用之前的圖片上傳方法

2.建議將此插件放入static或其他目錄，修改plugin.js文件中的文件路徑

var baseURL=tinymce.baseURL;
var iframe1 = baseURL + '/static/plugins/axupimgs/upfiles.html';