element-plus的upload组件边框不显示的问题解决

改动前                                                                改动后

           

一开始为系统添加导入功能,使用了element中的upload组件,但是出现的效果是无边框。官网原代码如下

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

修改方法:将这两个样式扔到全局样式文件中就好了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus的upload组件可以用于上传图片。根据引用的代码,上传单个图片的示例代码如下: ```javascript <el-form-item label="图片" prop="image"> <el-upload class="dl-avatar-uploader-min square" :action="uploadUrl" :show-file-list="false" :on-success="handleUpImage" :before-upload="beforeImageUpload" list-type="picture" accept="image/*"> <el-image v-if="addform.image" :src="addform.image" class="avatar"></el-image> <i v-else class="el-icon-plus avatar-uploader-icon"></i> <template #tip> <div class="el-upload__tip">只能上传图片,且单张图片大小不能超过10MB</div> </template> </el-upload> </el-form-item> ``` 如果需要上传多张图片,可以参考引用提供的链接,其中包含了基于element-ui的upload组件的预览和删除功能。 另外,如果你想要使用element-plus的upload组件上传单个文件(仅限pdf格式),可以参考引用提供的代码: ```html <el-upload :file-list="fileList" class="upload-demo" action="接口" multiple v-model="ruleForms.upload" accept=".pdf" :before-upload="changeFiles" :on-change="handleChanges"> <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">仅允许上传一个文件,仅限pdf格式</div> </template> </el-upload> ``` 这个代码将允许用户选择单个pdf文件进行上传。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3 + elementPlus 上传图片](https://blog.csdn.net/thingir/article/details/124802295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [基于element-ui 使用 upload 预览图片 (含删除功能)](https://download.csdn.net/download/qq_36437172/11601659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue3中element-plus Upload上传文件](https://blog.csdn.net/m0_64397933/article/details/126689165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值