vue+elementui中el-upload组件上传文件时，修改文件名，不用FormData

在Vue中使用Element UI的<el-upload>组件时，如果你想在不使用FormData的情况下修改文件名，你可以在上传之前拦截文件，修改文件名，然后转换为Blob对象。以下是一个简化的代码示例：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'your-upload-url',
    };
  },
  methods: {
    handleBeforeUpload(file) {
      // 修改文件名
      const modifiedFileName = 'modified_' + file.name;
 
      // 读取文件内容为Blob
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
 
      return new Promise((resolve) => {
        reader.onload = (e) => {
          // 创建Blob对象
          const blob = new Blob([e.target.result], { type: file.type });
          // 使用Blob对象创建新文件
          const newFile = new File([blob], modifiedFileName, {
            type: file.type,
            lastModified: Date.now(),
          });
 
          // 使用newFile替代原始file进行上传
          this.uploadFile(this.uploadUrl, newFile).then((response) => {
            this.handleSuccess(response);
          });
 
          resolve(false); // 返回false停止默认上传行为
        };
      });
    },
    uploadFile(url, file) {
      // 使用你喜欢的HTTP库上传文件
      const formData = new FormData();
      formData.append('file', file);
      return axios.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
    },
    handleSuccess(response) {
      // 处理上传成功
      console.log('Upload success:', response);
    },
  },
};
</script>

在这个示例中，handleBeforeUpload方法会在文件选择后触发。它使用FileReader读取文件内容，然后创建一个新的Blob对象，最后使用修改过文件名的File对象替代原始文件。上传操作被放在FileReader的onload事件中，因为这是处理文件内容必须的。上传逻辑被封装在uploadFile方法中，它使用axios发送一个POST请求，其中包含修改过文件名的文件。

注意：这个例子使用了axios库来发送HTTP请求，你需要先通过npm或yarn安装它。

这个方法的缺点是它不使用FormData，因此不能直接使用Element UI的<el-upload>组件的auto-upload属性。你需要手动触发上传，例如在handleBeforeUpload方法中调用uploadFile函数。