设置el-upload中上传的文件名

在Element UI的`el-upload`组件中，你可以通过监听`upload`事件的`file`属性来获取上传的文件对象，然后从该对象的`name`或`path`属性来获取文件名。例如：

<template>
  <el-upload
    action="your-api-url"
    :on-success="handleSuccess"
    :auto-upload="false" // 阻止默认上传，手动触发
  >
    <el-button slot="trigger">选择文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(file) {
      const fileName = file.name; // 文件名
      console.log('上传成功，文件名:', fileName);
    },
  }
}
</script>

在这个例子中，当用户选择了文件并点击“上传”按钮（实际上是调用了`handleSuccess`函数），文件对象的`name`属性将包含所选文件的原始名称。

相关问题

el-upload上传回显文件名

对于el-upload组件，可以通过监听change事件来获取上传文件的文件名。在change事件的回调函数中，可以通过event.target.files[0].name来获取文件名。

下面是一个示例代码：

<template>
  <el-upload
    action="/upload"
    :on-change="handleChange"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      const fileName = event.target.files[0].name;
      console.log(fileName); // 打印上传的文件名
    }
  }
}
</script>

在上述代码中，el-upload组件绑定了一个change事件，当用户选择了文件后，会触发handleChange方法。在handleChange方法中，通过event.target.files[0].name获取到上传文件的文件名，并进行相应的处理（这里只是简单地打印出来）。你可以根据实际需求进行进一步的操作。

修改el-upload中上传的文件名

在`Element-UI`的`el-upload`组件中，如果你想修改上传文件的名称，通常是在上传处理函数（upload hook）里对上传的文件进行预处理。你可以获取到每个文件对象（`File`对象），然后使用`File`对象的`name`属性和`rename`方法来改变其原始名字。

以下是一个简单的例子：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :file-list="fileList"
  >
    <i class="el-icon-upload"></i> Click to Upload
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 初始化为空数组
      uploadUrl: 'your-url-here', // 你的上传服务器地址
    };
  },
  methods: {
    handleSuccess(response, file) {
      const newFileName = 'new-file-name'; // 新的文件名
      if (response.status === 200 && response.data.code === 200) { // 检查上传成功
        file.name = newFileName; // 使用rename方法更改文件名
        this.fileList.push(file); // 更新fileList
      }
    },
  },
};
</script>

在这个例子中，当文件成功上传后，我们假设响应状态和数据都正常，会将`file.name`更改为`new-file-name`，然后将这个新文件信息添加到`fileList`中。