Vue上传图片使用Element组件实现（组件方法and手写方法）

最新推荐文章于 2024-06-19 11:34:46 发布

秋之合

最新推荐文章于 2024-06-19 11:34:46 发布

阅读量92

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/B13362260109/article/details/131778705

版权

本文介绍了如何在Vue项目中利用Element组件和自定义方法实现后台管理的图片上传功能，强调了action属性在设置上传接口时的重要性，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

后台管理的图片上传功能（组件方法），最近写到后台管理时需要用到组件上传图片（为了美观）

组件上传功能

elementplus官网

action属性是要写入你的接口的上传图片，不然你是上传空白的（切记这里是必填的）

这里呢就是具体代码

<template>
 <div>
      <p>商品图片：</p>
      <div class="commodity_img">
        <!-- 上传图片 -->
        <el-upload
          list-type="picture-card"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

秋之合

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

封装element-plus上传图片组件

qq_63608386的博客

01-12

704

【代码】封装element-plus上传图片组件。

封装抽屉组件+上传框预览图片+富文本编辑器【vue3+element-plus】

baekpcyyy的博客

12-22

566

此处需要关闭 element-plus 的自动上传, :auto-upload=“false”语法:URL.createObjectURL(…) 创建本地预览的地址,来预览。官网地址：https://vueup.github.io/vue-quill/只需要做前端的本地预览图片即可,无需在提交前上传图标。不需要配置 action 等参数。

参与评论您还未登录，请先登录后发表或查看评论

Vue3+ElementPlus文件上传详细教程

最新发布

m0_73351812的博客

06-19

7166

使用action属性为自动上传，值设置为你的后端接口地址，before-upload属性绑定的方法是上传前自动调用的方法，可以对具体上传的文件格式进行限制。下边是后端代码，使用action方式自动上传文件，会自动向后端传递一个文件对象，在后端用MultipartFile接收它，然后进行文件的保存就可以了。:on-success属性绑定的函数为文件上传成功时自动调用的函数，通常用来获取后端接口返回的值。首先添加el-upload标签到页面中。

Element Plus中图标的使用

weixin_51293134的博客

08-21

951

首先需要安装element-plus的icon库。

element plus 的图片上传组件回显

m0_72759446的博客

08-21

1082

element图片回显是通过修改file-list属性的url属性实现的。

elementPlus中的upload组件的理解与使用

m0_52028574的博客

06-06

3424

在elementPlus中上传组件的使用是最为复杂且繁琐的，在本次项目中由于elementPlus中的upload组件的上传函数被绑定在了action中（从本地提交图片，在显示时就会直接上传图片）而导致无法按照先前设计好的接口（将图片与其他数据一起上传）形式实现文件的传输，所以使用了一种能自主调用上传接口的方法实现上传（难点：没有TS基础，upload组件的文档编写不是很详细，所以函数编写和样例不同，导致走了很多弯路）。

vue项目中将element-ui table表格写成组件的实现代码

10-16

在Vue项目开发过程中，将Element-UI的表格（Table）组件封装成可复用的组件是一个常见的需求。这样做可以减少代码的重复编写，提高开发效率，同时也使得表格数据处理和样式管理更为集中和方便。Element-UI是一个基于...

vue+element加入签名效果（移动端可用）

10-16

在Vue.js和Element UI框架中实现移动端的签名功能，我们可以按照以下步骤来进行： 1. **引入签名组件**：首先，我们需要一个签名组件，这通常是一个包含`canvas`元素的自定义组件，允许用户通过触控或鼠标进行绘图...

element-ui table组件如何使用render属性的实现

01-19

在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。障碍：类似于下面自定义表列的样式，...

基于elementPlus的el-upload的二次封装组件

m18565890306的博客

09-01

1767

【代码】基于elementPlus的el-upload的二次封装组件。

【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效

m0_59699613的博客

11-14

1896

设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。

vue3 element plus 中el-image本地图片加载失败，路径问题

qq_43378240的博客

09-12

2133

src那里要用require包起来，这样就行了。

vue3 + ts + element plus 上传缩略图片、更换新图片、显示进度条

u014391099的博客

06-11

3889

element plus 上传组件，缩略图，显示进度条

Vue3+element-plus自定义上传图片+带参数的POST请求

m0_51044974的博客

07-06

6455

Element-Plus自定义上传图片，使用表单数据上传（携带其他参数。）

vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。

技术前端，忠于热爱 @回忆哆啦没有A梦

05-30

7706

vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。

基于ElementUI自定义上传附件

snowXZZ的博客

03-10

493

<el-upload style="display: inline-block" :limit="6" class="upload-demo" action="#" ref="upload" multiple :file-list="fileList" :on-change="handleChange" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" :http-request="uploadS...

vue+elementUI 代码实现一个手写签名的功能

04-28

好的，针对您的问题，我可以给您提供一个基于 Vue 和 ElementUI 的手写签名实现代码，您可以参考下面的代码： ``` <canvas class="signature-canvas-element" ref="canvas" @mousedown="startDrawing" @...