el-upload我想上传的如果是图片则照片墙显示,其他文件则文本显示
时间: 2023-11-20 16:05:27 浏览: 89
您可以在上传文件时,通过判断文件类型来进行不同的处理。如果上传的是图片文件,可以将图片显示在照片墙上;如果上传的是其他类型的文件,可以将文件内容显示在文本框中。
以下是一个示例代码,您可以参考一下:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:limit="3"
:file-list="fileList"
:auto-upload="false"
:show-file-list="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="upload">上传到服务器</el-button>
</el-upload>
<div v-for="file in fileList" :key="file.name">
<div v-if="isImage(file)">
<img :src="file.url" alt="" style="max-width: 200px;">
</div>
<div v-else>
{{ file.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
isImage(file) {
const type = file.type.split('/')[0]
return type === 'image'
},
beforeUpload(file) {
this.fileList.push(file)
return false
},
onSuccess() {
this.fileList = []
},
onError() {
this.fileList = []
},
upload() {
const formData = new FormData()
this.fileList.forEach((file) => {
formData.append('file', file)
})
// TODO: 将 formData 上传到服务器
}
}
}
</script>
```
在这个示例代码中,我们使用了 `el-upload` 组件来进行文件上传,同时在文件上传之前,通过 `beforeUpload` 方法将文件添加到 `fileList` 中。在文件上传成功之后,我们将 `fileList` 清空。
在模板中,我们使用 `v-for` 指令遍历 `fileList` 中的文件,并根据文件类型来进行不同的处理。如果是图片文件,我们将图片显示在照片墙上;如果是其他类型的文件,我们将文件名显示在文本框中。
注意:由于安全原因,浏览器无法访问本地文件路径,因此在示例代码中,我们使用了文件的 URL 来显示图片。在实际应用中,需要将文件上传到服务器,并使用服务器返回的 URL 来显示图片。
阅读全文