有:show-file-list="false"这个属性之后就都不展示了啊
时间: 2024-03-03 11:47:23 浏览: 19
你是对的,如果将 `show-file-list` 属性设置为 `false`,将会隐藏整个文件列表,包括准备状态的文件。如果你只想隐藏已上传的文件列表,可以使用 `list-type` 属性,将其设置为 `'picture'` 或者 `'picture-card'`,这样文件列表将会以图片形式展示。示例代码如下:
```html
<el-upload
action="/your/upload/url"
list-type="picture-card"
:on-success="handleSuccess"
:on-error="handleError"
>
<i class="el-icon-plus"></i>
</el-upload>
```
如果你仍然想在文件列表中显示准备状态的文件,可以使用默认的列表形式,并设置 `file-list` 属性,将其绑定到一个数组上:
```html
<el-upload
action="/your/upload/url"
:file-list="fileList"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
然后在组件中定义 `fileList` 数组,并在上传成功的回调函数中将上传成功的文件信息添加到 `fileList` 数组中。这样,准备状态的文件也将显示在文件列表中。
相关问题
class="avatar-uploader" action="http://127.0.0.1:5000/upload" :show-file-list="false"
这是一个包含了上传头像功能的 HTML 元素,其中 `class="avatar-uploader"` 是指定元素的样式,`action="http://127.0.0.1:5000/upload"` 是指定上传图片的目标地址,`:show-file-list="false"` 是指定是否显示已上传的文件列表。具体的上传逻辑需要在后端实现。
<el-upload v-if="userType!=='stu'" accept=".png,.jpeg,.jpg" action :http-request="uploadPhoto" :file-list="fileImgList" :show-upload-list="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload>去除右上角的勾号
你可以在el-upload组件中添加一个slot属性为`file`,然后在这个slot中自定义上传文件列表项的显示。这样就可以去掉右上角的勾号了。
例如:
```html
<el-upload v-if="userType!=='stu'"
accept=".png,.jpeg,.jpg"
action
:http-request="uploadPhoto"
:file-list="fileImgList"
:show-upload-list="false"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
<template slot="file" slot-scope="{ file }">
<div class="el-upload-list__item-thumbnail">
<img :src="file.url" alt="" />
</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</template>
</el-upload>
```
在这里,我们通过添加一个`file` slot来自定义上传文件列表项的显示,其中包括一个放置图片缩略图的div和两个操作按钮:预览和删除。这样就可以去掉右上角的勾号了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)