el-upload上传回显本地文件,不用上传到服务器获取本地路径
时间: 2024-10-14 09:09:46 浏览: 6
在使用Element UI的`el-upload`组件时,如果你想显示已上传文件的本地路径,而不是实际上传到服务器,可以在文件上传成功后立即从本地读取文件并显示路径。这里是一个基本示例:
首先,在`el-upload`的`on-success`回调函数中,你可以得到上传成功的`file`对象。然后,你可以使用`URL.createObjectURL()`创建一个指向文件的临时URL,这可以用来展示文件名或预览图片。
```html
<template>
<el-upload
:action=""
list-type="picture"
:on-success="handleSuccess"
multiple
>
<el-button>点击上传</el-button>
</el-upload>
<div v-if="files.length">
<ul>
<li v-for="(file, index) in files" :key="index">
<img :src="url(file)" :alt="file.name" style="width: 100px;">
文件路径:{{ file.path }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
files: [],
url(file) {
return URL.createObjectURL(file);
},
};
},
methods: {
handleSuccess(response, file) {
this.files.push({
path: file.originPath, // 假设originPath存在并且是文件的原始本地路径
name: file.name,
});
},
},
};
</script>
```
请注意,`originPath`在这里假设是`el-upload`插件提供的文件的原始本地路径,具体实现可能会因插件的不同而有所差异。如果`originPath`不存在,你需要另外找到一种方式来获取文件的真实本地位置。