element-ui 文件上传修改文件名的方法示例

下面是关于element-ui文件上传修改文件名的方法示例的完整攻略：

1. element-ui文件上传基础知识

在使用element-ui进行文件上传时，需要先了解一些基础知识。element-ui提供了 el-upload 组件，可以用于文件上传。具体用法可以参考官方文档：el-upload

2. 修改上传文件的文件名

默认情况下，上传的文件的文件名是不会被修改的。但是在某些情况下，我们可能会需要修改上传文件的文件名，这时候可以通过监听 el-upload 的 before-upload 事件，在文件上传之前修改文件名。

下面是一个示例说明：

<template>
  <el-upload
    class="upload-demo"
    :action="actionUrl"
    :before-upload="beforeFileUpload"
    :on-success="onSaveSuccess"
    :on-error="onSaveError"
    :data="{token:token}"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      actionUrl: '/api/upload',
      token: 'Bearer xxxxxxxx' // 上传需要的token
    };
  },
  methods: {
    beforeFileUpload(file) {
      file.name = 'new_' + file.name; // 修改文件名
      return true;
    },
    onSaveSuccess(response, file, fileList) {
      console.log('onSaveSuccess:', response, file, fileList);
    },
    onSaveError(error, file, fileList) {
      console.log('onSaveError:', error, file, fileList);
    }
  }
};
</script>

在上面的代码中，我们监听了 before-upload 事件，并在事件处理函数中修改了上传文件的文件名。在示例中，我们将文件名加上了前缀 'new_'。修改文件名的操作需要在返回 true 后才会生效。

3. 自定义文件名的示例

除了在 before-upload 事件中修改文件名外，我们还可以在其他方式中自定义文件名。下面是一个示例说明：

<template>
  <el-upload
    class="upload-demo"
    :action="actionUrl"
    :before-upload="beforeFileUpload"
    :on-success="onSaveSuccess"
    :on-error="onSaveError"
    :data="{token:token}"
    multiple>
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      actionUrl: '/api/upload',
      token: 'Bearer xxxxxxxx' // 上传需要的token
    };
  },
  methods: {
    beforeFileUpload(file) {
      // 获取当前时间戳
      var timestamp = new Date().getTime();
      // 获取文件后缀
      var suffix = file.name.substring(file.name.lastIndexOf('.'));
      // 修改文件名
      file.name = 'file_' + timestamp + suffix;
      return true;
    },
    onSaveSuccess(response, file, fileList) {
      console.log('onSaveSuccess:', response, file, fileList);
    },
    onSaveError(error, file, fileList) {
      console.log('onSaveError:', error, file, fileList);
    }
  }
};
</script>

在上面的代码中，我们通过在 before-upload 事件中获取当前时间戳和文件后缀，自定义了上传文件的文件名。最终上传的文件名为 'file_{时间戳}.{后缀名}'。