this.$message.success("文件 [" + file.name + "] 上传成功");有什么用

`this.$message.success` 是 `element-ui` 组件库中的一种弹窗提示组件，用于在页面上显示一些短暂的成功提示信息。通过 `this.$message.success` 组件，我们可以方便地在页面上显示这些信息，而不需要手动编写弹窗代码。

在这段代码中，`this.$message.success` 被用于在文件上传成功后，在页面上显示一个短暂的成功提示信息，告诉用户文件上传已经成功完成，并显示上传的文件名。具体来说，`this.$message.success` 方法的作用是在页面上显示一个成功提示框，其中的提示信息为 `"文件 [" + file.name + "] 上传成功"`。

需要注意的是，该代码中的 `this` 指的是当前组件的实例对象，因为这段代码通常是在组件中调用的。而 `$message` 则是 `element-ui` 组件库提供的全局方法，用于在页面上显示弹窗提示框。

相关问题

<el-upload action :auto-upload="false" list-type="picture-card" :on-remove="handleRemove" :limit="1" :on-change="hansdleChange" ref="upload" > <i class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传SVG文件，且不超过8KB</div> </el-upload> hansdleChange(file, fileList) { let imgSize = Number(file.size / 1024); const isSVG = file.name.split(".")[1] === "svg"; if (!isSVG) { this.$refs.upload.clearFiles(); this.$message.error("上传图片只能是 SVG 格式!"); } else { if(imgSize>8){ this.$refs.upload.clearFiles(); this.$message.error("上传图片不能大于8KB!"); }else{ this.deviceForm.file = file; } // this.deviceForm.file = file; } },怎么修改

要在 `handleChange` 方法中添加给没有 `viewbox` 的 SVG 图片添加 `viewbox 的逻辑，你可以进行如下修改：

handleUpload(file, fileList) {
  let imgSize = Number(file.size / 1024);
  const isSVG = file.name.split(".")[1] === "svg";
  
  if (!isSVG) {
    this.$refs.upload.clearFiles();
    this.$message.error("上传图片只能是 SVG 格式!");
  } else {
    if (imgSize > 8) {
      this.$refs.upload.clearFiles();
      this.$message.error("上传图片不能大于8KB!");
    } else {
      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);
          // 将修改后的 SVG 内容赋值给 this.deviceForm.file 或发送到服务器
          this.deviceForm.file = new Blob([newSvgContent], { type: "image/svg+xml" });
        } else {
          this.deviceForm.file = file;
        }
      };

      reader.readAsText(file.raw);
    }
  }
}

在上述代码中，我将原来的 `handleSuccess` 改为 `handleUpload` 方法，并将其作为 `onChange` 事件的处理函数。在该方法中，我保留了原来的文件类型和大小的校验逻辑。如果上传的文件不是 SVG 格式或大小超过 8KB，将清空上传列表并显示错误信息。

对于合法的 SVG 文件，我添加了读取文件内容并解析为 XML 的逻辑。然后，通过 DOM 操作找到 `<svg>` 元素，检查是否已经有 `viewbox` 属性。如果没有，则使用 `setAttribute` 方法添加 `viewbox` 属性，并设置其值为 `"0 0 width height"`。最后，使用 `XMLSerializer` 对象将修改后的 XML 内容转换为字符串，并将其赋值给 `this.deviceForm.file` 属性，或发送到服务器。

请根据你的实际需求和代码结构，将以上修改应用到你的 Vue 组件中。

用vue + element ui + node.js 写图片上传

首先需要安装依赖：

npm install vue element-ui axios express multer

其中，axios用于发送HTTP请求，express和multer用于处理后端的文件上传。

在前端Vue组件中，需要引入element-ui的Upload组件，并监听其change事件，当用户选择文件后，调用axios发送POST请求将文件上传到后端：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="http://localhost:3000/upload"
      :on-change="handleUpload"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">上传文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    handleUpload(file) {
      const formData = new FormData()
      formData.append('file', file.raw)
      axios.post('http://localhost:3000/upload', formData).then(() => {
        this.$message.success('上传成功')
      })
    }
  }
}
</script>

在后端Node.js中，需要使用multer中间件处理文件上传，并创建一个路由来处理上传请求：

const express = require('express')
const multer = require('multer')

const app = express()

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function(req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('上传成功')
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

其中，multer中间件可以根据配置的storage来处理文件存储和命名，上述例子中将文件存储在uploads文件夹中，并以时间戳和原始文件名的组合作为文件名。在路由中，使用upload.single('file')来指定只上传单个文件，且文件名为file。最后，将上传成功的状态返回给前端。