Vue?設(shè)置圖片不轉(zhuǎn)為base64的方式

更新時間：2022年02月09日 10:50:36 作者：黃河愛浪

這篇文章主要介紹了Vue實現(xiàn)設(shè)置圖片不轉(zhuǎn)為base64的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue設(shè)置圖片不轉(zhuǎn)為base64

在使用 Vue.js 框架開發(fā)項目時，vue-cli創(chuàng)建的webpack模板默認會將10K以下的圖片和字體文件轉(zhuǎn)為base64。

好處：帶來了更快的渲染，不會因為頁面切換時還有加載圖片的延遲感。

壞處：打包后的CSS，JS文件非常大，特別是圖片數(shù)量多的情況下，這個問題尤為明顯。

vue-cli 3 、vue-cli 4 版本

修改文件：vue.config.js

源碼如下

module.exports = {
    // ...
    /* 調(diào)整內(nèi)聯(lián)文件的大小限制，讓小圖片不轉(zhuǎn)為base64 */
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 1 }))
    },
    // ...
}

vue-cli 2 版本

修改文件：/build/webpack.base.conf.js

修改方式，如下圖所示位置，將圖片和字體的 limit（限制）修改為：1（0貌似無效），修改后文件都不會再被轉(zhuǎn)為base64格式了。

Vue項目base64轉(zhuǎn)img

最近一個vue項目中，有個需求是，發(fā)送消息是base64時，轉(zhuǎn)換成圖片預覽發(fā)送出去。

輸入框

<el-input
        class="input-box"
        ref="elInputText"
        type="textarea"
        v-model="content"
        @paste.native="onPasteEvent"
        @keydown.native.enter.prevent="handlerKeyupEnter"
      ></el-input>

設(shè)定一個 dialog 彈框。

<!-- 圖片預覽dialog -->
    <el-dialog
      title="圖片預覽"
      :visible.sync="previewImgObj.show"
      v-if="previewImgObj.show"
      append-to-body
    >
      <img
        width="100%"
        v-if="previewImgObj.imgUrl"
        class="ly-margin-center"
        :src="previewImgObj.imgUrl"
        v-image-view
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewImgObj.show = false">取 消</el- button>
        <el-button type="primary" @click="sendBase64ImgMessge">確 定</el-button>
      </span>
    </el-dialog>

// 監(jiān)聽粘貼事件
    async onPasteEvent(e) {
      e.preventDefault();
      let data = await addEventPasteListener(e);
       if (data.type === "string") {
        // 復制某條消息
        if (!data.string) return;
        // console.log(data.string)
        // 正則表達式判斷data是否是base64
        function validDataUrl(s) {
          return validDataUrl.regex.test(s);
        }
        validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
        // 如果是base64轉(zhuǎn)換成圖片預覽
        if (validDataUrl(data.string)) {
          let that = this;
          function previwImg(item) {
            that.previewImgObj = {
              show: true,
              imgUrl: item
            };
          }
          previwImg(data.string);
        }
     }