vue-html5-editor插件png圖片上傳失敗解決方法

jpg可以正常上傳,png就會上傳失敗.這是因爲開啓了圖片壓縮,導致Content-Type:image/jepg,以及內部文件編碼問題.只需要將壓縮參數配置設置爲null即可

 

以下是上傳png圖片時開啓壓縮時:

compress: {

      width: 1600,

      height: 1600,

      quality: 80

    },

 

以下是上傳png圖片時關閉壓縮時:

compress: null

 

官方配置:  官方文檔

Vue.use(VueHtml5Editor, {
    // 全局組件名稱，使用new VueHtml5Editor(options)時該選項無效 
    // global component name
    name: "vue-html5-editor",
    // 是否顯示模塊名稱，開啓的話會在工具欄的圖標後臺直接顯示名稱
    // if set true,will append module name to toolbar after icon
    showModuleName: false,
    // 自定義各個圖標的class，默認使用的是font-awesome提供的圖標
    // custom icon class of built-in modules,default using font-awesome
    icons: {
        text: "fa fa-pencil",
        color: "fa fa-paint-brush",
        font: "fa fa-font",
        align: "fa fa-align-justify",
        list: "fa fa-list",
        link: "fa fa-chain",
        unlink: "fa fa-chain-broken",
        tabulation: "fa fa-table",
        image: "fa fa-file-image-o",
        hr: "fa fa-minus",
        eraser: "fa fa-eraser",
        undo: "fa-undo fa",
        "full-screen": "fa fa-arrows-alt",
        info: "fa fa-info",
    },
    // 配置圖片模塊
    // config image module
    image: {
        // 文件最大體積，單位字節  max file size
        sizeLimit: 512 * 1024,
        // 上傳參數,默認把圖片轉爲base64而不上傳
        // upload config,default null and convert image to base64
        upload: {
            url: null,
            headers: {},
            params: {},
            fieldName: {}
        },
        // 壓縮參數,默認使用localResizeIMG進行壓縮,設置爲null禁止壓縮
        // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
        // set null to disable compression
        compress: {
            width: 1600,
            height: 1600,
            quality: 80
        },
        // 響應數據處理,最終返回圖片鏈接
        // handle response data，return image url
        uploadHandler(responseText){
            //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
            var json = JSON.parse(responseText)
            if (!json.ok) {
                alert(json.msg)
            } else {
                return json.data
            }
        }
    },
    // 語言，內建的有英文（en-us）和中文（zh-cn）
    //default en-us, en-us and zh-cn are built-in
    language: "zh-cn",
    // 自定義語言
    i18n: {
        //specify your language here
        "zh-cn": {
            "align": "對齊方式",
            "image": "圖片",
            "list": "列表",
            "link": "鏈接",
            "unlink": "去除鏈接",
            "table": "表格",
            "font": "文字",
            "full screen": "全屏",
            "text": "排版",
            "eraser": "格式清除",
            "info": "關於",
            "color": "顏色",
            "please enter a url": "請輸入地址",
            "create link": "創建鏈接",
            "bold": "加粗",
            "italic": "傾斜",
            "underline": "下劃線",
            "strike through": "刪除線",
            "subscript": "上標",
            "superscript": "下標",
            "heading": "標題",
            "font name": "字體",
            "font size": "文字大小",
            "left justify": "左對齊",
            "center justify": "居中",
            "right justify": "右對齊",
            "ordered list": "有序列表",
            "unordered list": "無序列表",
            "fore color": "前景色",
            "background color": "背景色",
            "row count": "行數",
            "column count": "列數",
            "save": "確定",
            "upload": "上傳",
            "progress": "進度",
            "unknown": "未知",
            "please wait": "請稍等",
            "error": "錯誤",
            "abort": "中斷",
            "reset": "重置"
        }
    },
    // 隱藏不想要顯示出來的模塊
    // the modules you don't want
    hiddenModules: [],
    // 自定義要顯示的模塊，並控制順序
    // keep only the modules you want and customize the order.
    // can be used with hiddenModules together
    visibleModules: [
        "text",
        "color",
        "font",
        "align",
        "list",
        "link",
        "unlink",
        "tabulation",
        "image",
        "hr",
        "eraser",
        "undo",
        "full-screen",
        "info",
    ],
    // 擴展模塊，具體可以參考examples或查看源碼
    // extended modules
    modules: {
        //omit,reference to source code of build-in modules
    }
})