el-upload根据url下载文件时指定下载文件名称
时间: 2024-10-22 16:08:54 浏览: 41
在使用Element UI的el-upload组件从URL下载文件时,如果你想要自定义下载的文件名,可以在`onSuccess`回调函数中处理这个逻辑。下面是一个简单的示例:
```javascript
<template>
<el-upload
action="your-url"
:http-request="customDownloadRequest"
auto-upload
on-success="handleSuccess"
name="file"
>
<i class="el-icon-upload"></i>点击上传
</el-upload>
</template>
<script>
export default {
methods: {
customDownloadRequest(file, response) {
const url = file.response; // 获取到的原始响应地址
const filename = '自定义文件名'; // 这里是你想给文件起的新名字
return new Promise((resolve, reject) => {
axios.download(url, filename)
.then(() => resolve())
.catch(err => reject(err));
});
},
handleSuccess(response, file) {
console.log('文件下载成功', file.name); // 这里可以看到下载后的文件名,如果是自定义的,则显示新名字
}
}
}
</script>
<style scoped></style>
```
在这个例子中,我们首先在`customDownloadRequest`方法中获取到服务器返回的实际文件内容(假设它是流),然后通过axios的`.download`方法将文件下载下来,并提供我们想要的文件名。
阅读全文