list-type="picture-card"
时间: 2023-05-01 16:02:29 浏览: 49
b'list-type="picture-card"'是指网页或应用程序中的一种列表类型,其中列表中的每个项目都以图片卡片的形式展示。每个项目通常包括一张图片,一些文本描述和一些可选操作按钮。这种列表类型通常用于展示产品列表、社交媒体分享、用户相册等。
相关问题
<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和两个操作按钮:预览和删除。这样就可以去掉右上角的勾号了。
<el-upload ref="imgurl" :file-list="imgurlfileList" :action="imgurlAction" :before-upload="imgurlBeforeUpload" list-type="picture-card" accept="image/*"> <i class="el-icon-plus"></i> </el-upload>前端用这个代码怎样对接后端Iformfile的接口
前端代码中的 `el-upload` 组件是用来上传文件的,其中 `:action` 属性指定了文件上传后需要调用的后端接口地址。而后端接口需要接收一个 `IFormFile` 类型的参数来接收上传的文件。
具体的对接方式可以参考以下步骤:
1. 在后端的控制器中定义接收 `IFormFile` 参数的方法,例如:
```csharp
[HttpPost("upload")]
public async Task<IActionResult> Upload(IFormFile file)
{
// 处理上传的文件
// ...
}
```
2. 在前端代码中,设置 `action` 属性为后端接口的地址,并且在 `before-upload` 事件中设置请求头部,以便后端能够正确地接收到文件:
```html
<el-upload :action="'/api/upload'" :before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
```
```javascript
methods: {
beforeUpload(file) {
// 设置请求头部
file.headers = { 'Content-Type': 'multipart/form-data' };
return true;
}
}
```
这样前端上传文件时,会将文件作为 `IFormFile` 类型的参数传递给后端的 `Upload` 方法。后端就可以对上传的文件进行处理了。