Vue3——自定义封装上传图片样式

简介: 自定义封装上传图片样式

自定义封装上传图片样式

一、首先需要新建一个自组建完善基础的结构,我这里起名为ImgUpload.vue

<el-upload name="file" 
           :show-file-list="false" 
           accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" :multiple="false" 
           :http-request="uploadImgage">
</el-upload>

name 上传的文件字段名

show-file-list 是否显示已上传文件列表

accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效)

multiple 是否支持多选文件

http-request 覆盖默认的 Xhr 行为,允许自行实现上传文件的请求

二、接下来自定义背景以及图标

<el-upload name="file" :show-file-list="false" accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
    :multiple="false" :http-request="uploadImgage">
    <!-- 这里定义上传样式-->
    <div class="cover-upload-btn">
      <template v-if="modelValue">
        <img :src="proxy.globaInfo.imageUrl + modelValue" alt="">
      </template>
      <i v-else class="iconfont icon-jia"></i>
    </div>
  </el-upload>

判断如果存在路径则显示图片,否则显示默认背景

样式如下:

.cover-upload-btn {
  width: 150px;
  height: 150px;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 5%;
  padding: 5px;
  box-sizing: border-box;
  img{
    width: 100%;
  }
  i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 46px;
    transform: translate(-50%, -50%);
    color: #aaa;
  }
}

样式效果如下:

5d794bfd92754205b6ec13ad97b05287.png

三、上传方法

const uploadImgage = async(file) => {
    console.log(file);
    // 请求接口中需要带url以及
    let result = await proxy.Request({
        url:api.uploadUrl,  // 上传路径
        dataType:'file', // 指定传输类型
        params:{
            file:file.file,   // 提交上传路径到指定位置
            type:0,          
        }
    })
    const fileName = result.data.fileName
    emit('update:modelValue',fileName) 
};

dataType可以参考这段封装请求的requset

f76b2ece7d7943d8a503b0e56a391b74.png

前面配置的代码部分如下:

import { getCurrentInstance } from "vue";
const {proxy} = getCurrentInstance()
// 通过props将路径传给父组件
const props = defineProps({
    modelValue:{
        type:String,
        default:null
    }
})
const api = {
    uploadUrl:'/img' //图片上传接口
}

然后注意一下这个位置

<img :src="proxy.globaInfo.imageUrl + modelValue" alt="">

这里的globaInfo.imageUrl是在全局中进行调用,所以上方使用proxy来获取路径位置

main.js配置如下

import App from './App.vue'
const app = createApp(App);
app.config.globalProperties.globaInfo = {  // 添加可以在应用程序内的任何组件实例中访问的全局 property。属性名冲突时,组件的 property 将具有优先权。
    imageUrl:'/api/file/'  //放入图片的文件夹位置
};
import ImgUpload from '@/components/ImgUpload.vue'; //引入子组件
app.component('ImgUpload',ImgUpload) // 全局调用组件

最后在父组件中引入自组件即可

<el-form-item label="封面" class prop="cover">
  <CoverUpload v-model="formData.cover"></CoverUpload>
</el-form-item>
目录
打赏
0
0
0
0
5
分享
相关文章
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
390 5
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
142 17
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
175 17
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
45 0
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
437 0
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
163 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
355 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
230 77
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问