created() {
    this.title = this.readFile("../../../static/images/雷达.svg");
    console.log(this.title,"svg文件读取");
    var newSvg=this.title.replace(/#(?:[0-9a-fA-F]{6})/, "#f1f1f1");
    console.log(newSvg,"修改颜色后的svg文件");
    var href = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(newSvg)));//svg转base64
    console.log("svg转base64",href);
methods:{
    // 读取svg代码
    readFile(filePath) {
        // 创建一个新的xhr对象
        let xhr = null
        if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
        } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
        const okStatus = document.location.protocol === 'file' ? 0 : 200
        xhr.open('GET', filePath, false)
        xhr.overrideMimeType('image/svg+xml')
        xhr.send(null)
        return xhr.status === okStatus ? xhr.responseText : null
JS利用正则配合replace替换指定字符
 
svg转base64
                    created() {    this.title = this.readFile("../../../static/images/雷达.svg");    console.log(this.title,"svg文件读取");    var newSvg=this.title.replace(/#(?:[0-9a-fA-F]{6})/, "#f1f1f1");    console.lo...
				
const img = new Image(); // 创建图片容器
      img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流
      img.onload = () => {
        // 图片创建后再执行，转Base64过程
        const canvas = document.createElement('canvas');
        canvas.width = 660;  /...
				
<input type="file" ref="upload" accept=".xml" @change="executorListchange" id="file_executor" class="outputlist_upload">
 executorListchange(){
      this.readXML();
 readXML() {
				
需要将端上传过来的svg文件解析为字符串，然后再生成jpeg格式图片，再将图片转成Base64格式进行使用首先引入如下以来。版本一定按照这个来，高版本会出现各种类丢失的问题。
再就是工具类代码
可以看到生成了base64字符串
进行转化后能够复原出图片
    const bytes = window.atob(base64.split(',')[1])
    const array = new Uint8Array(bytes.length)
    for (let i = 0; i < bytes.length; i++) {
        array[i] = bytes.charCodeAt(i)
2. 使用new Blob()函数创建Blob对象
    const blob = new Blob([array], { type: 'application/octet-stream' })
3. 你也可以使用npm库blob-util 这个库也可以实现base64转blob
    import { base64StringToBlob } from 'blob-util'
    const blob = base64StringToBlob(base64, 'application/octet-stream')
完整的示例代码如下：
    export default {
        methods: {
            async handleClick() {
                const base64 = 'data:application/octet-stream;base64,YWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4'
                const blob = await this.base64ToBlob(base64)
                // 使用blob对象
            base64ToBlob(base64) {
                const bytes = window.atob(base64.split(',')[1])
                const array = new Uint8Array(bytes.length)
                for (let i = 0; i < bytes.length; i++) {
                    array[i] = bytes.charCodeAt(i)
                return new Blob([array], { type: 'application/octet-stream' })
请注意，如果要在IE浏览器中使用Blob对象，需要使用polyfill库。
				VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案
					132963
				websocket报错DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
					25665
const path = require("path")
const webpack = require("webpack")
const CopyWebpackPlugin = require("copy-webpack-plugin")
function resolve(dir) {
    return path.join(__dirname, dir)
module.exports = {
    devServer: {
        //接口地址原本是/satellite/z={z}&x={x}&y={y} 但是为了匹配代理地址 调用时需在前面加一个 /satellite,  因此接口地址需要写成这样的即可生效 /satellite/satellite/z={z}&x={x}&y={y}
        proxy: {
            '/api': {//代理的目的：只要是/satellite开头的路径都往localhost:3000进行转发  
                target: 'http://localhost:8081', //后端接口地址 设置代理服务器地址 转发地址
                changeOrigin: true, //表示是否改变原域名；这个一定要选择为true; 是否允许跨域[ 如果接口跨域 则要配置这个参数]
                // secure: false, // 如果是https接口 需要配置这个参数 
                pathRewrite: {// 把程序中的地址转换成“真实地址”+‘/satellite’后面的部分如‘/satellite/satellite/z={z}&x={x}&y={y}'，被转换成'http://localhost:3000/satellite/z={z}&x={x}&y={y}'
                    '^/api': ''//修改pathRewrite地址 将前缀'^satellite'转为'/satellite'
    configureWeb
[/code]