在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函数。