vue使用el-upload上传svg图片怎么给没有viewbox的添加viewbox

对于没有 `viewbox` 的 SVG 图片，你可以通过以下步骤给它添加 `viewbox`：

1. 首先，在你的 Vue 组件中引入 `el-upload` 组件和需要上传的 SVG 图片文件。

<template>
  <el-upload
    class="upload"
    action="/your-upload-url"
    :headers="yourHeaders"
    :on-success="handleSuccess"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      yourHeaders: {
        // 添加你的请求头部信息
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功后的逻辑
    }
  }
};
</script>

2. 在上传成功后的回调函数 `handleSuccess` 中，获取到上传的 SVG 文件，并使用 DOM 操作给它添加 `viewbox` 属性。

handleSuccess(response, file, fileList) {
  const reader = new FileReader();

  reader.onload = (event) => {
    const svgContent = event.target.result;
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(svgContent, "image/svg+xml");
    
    const svgElement = xmlDoc.querySelector("svg");
    if (svgElement.getAttribute("viewBox") === null) {
      svgElement.setAttribute("viewBox", "0 0 width height");
      const newSvgContent = new XMLSerializer().serializeToString(xmlDoc);
      
      // 发送带有新的 viewbox 的 SVG 内容到服务器或进行其他操作
      // ...
    }
  };

  reader.readAsText(file.raw);
}

在上述代码中，使用 `FileReader` 对象读取上传的 SVG 文件，并将其内容解析为 XML 文件。然后，使用 DOM 操作找到 `<svg>` 元素，检查它是否已经有 `viewbox` 属性。如果没有，则使用 `setAttribute` 方法添加 `viewbox` 属性，并设置其值为 `"0 0 width height"`。最后，使用 `XMLSerializer` 对象将修改后的 XML 内容转换为字符串，你可以将其发送到服务器或进行其他操作。

这样，你就可以给没有 `viewbox` 的 SVG 图片添加 `viewbox` 属性了。请根据你的实际需求修改代码中的 URL、请求头、上传成功的逻辑以及数据处理逻辑。