使用Element的上传图片组件和Vue实现上传图片功能,在线等,急急急!!! 80C

难点:
一、action必选参数,为上传的地址?
二、上传的地址怎么链接后台数据接口?
三、是选择图片点击打开就上传到后台数据库里,还是选择图片后打开显示在页面上,然后使用保存按钮统一把数据保存到数据库里?
疑点:
:action="uplodaerUrl,
UploadUrl:function(){
return "返回需要上传的地址";

}

网上说action加绑定方法,返回链接地址,但是没成功案例,请大神指点!

![![![![图片说明](https://img-ask.csdn.net/upload/201808/02/1533220803_59376.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220793_255029.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220785_75921.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220771_945217.png)图片说明

0

6个回答

 <el-upload
          class="avatar-uploader"
          v-loading="loading"
          :show-file-list="false"
          multiple: false
          action="http://接口地址/api/common/uploadFile"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <!--<el-progress :percentage="progressData" v-show="loading"></el-progress>-->
        </el-upload>

handleAvatarSuccess(res, file) {
            this.loading = false
      this.imageUrl = res.data.url
      this.picName = res.data.name
      Message({
                type: 'success',
        message: '上传成功',
        showClose: true
        })
      },

beforeAvatarUpload(file) {
        this.loading = true
        this.progressData = 0
        var timer2 = setInterval(() => {
          this.progressData = this.progressData + 1
          if (this.progressData >= 100) {
            clearInterval(timer2)
          }
        }, 200)
        // const isJPG = file.type === 'image/jpeg'
        const isLt5M = file.size / 1024 / 1024 < 5
        // if (!isJPG) {
        //   Message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt5M) {
          Message({
                    type: 'warning',
          message: '上传头像图片大小不能超过 5MB!',
          showClose: true
            })
        }
        return isLt5M
      },

1
weixin_38838750
企鹅YU 谢谢整理代码! 主要问题是action,我没有直接的传送地址比如http什么的,我是要通过后台接口传送代码??? 我该怎么样把后台接口放到action里?
大约一年之前 回复

后台给上传的接口, 通过接口的url上传后, 后台会返回图片在服务器的url和name

0
qq_40917843
土豆君 回复weixin_39533682: 这种放自己服务器的跟放第三方的一样的, 放第三方用户取消提交也是会存储的, 或者提供个取消的接口, 取消的话删除相关的数据
8 个月之前 回复
weixin_39533682
不忘初心、砥砺前行 你这样很损失服务器资源啊,如果取消了提交,服务器上面的图片怎么办
8 个月之前 回复

图片说明

0
weixin_38838750
企鹅YU 具体怎么做,可以贴一下完整的代码吗?
大约一年之前 回复
0

谢谢整理代码!
主要问题是action,我没有直接的传送地址比如http什么的,我是要通过后台接口传送代码???
我该怎么样把后台接口放到action里?

0
weixin_38838750
企鹅YU 回复qq_40917843: 谢谢解答,谢谢!
大约一年之前 回复
qq_40917843
土豆君 是的 这个要后台给你接口的
大约一年之前 回复
-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue中使用elementUI组件的Upload 上传图片
1.访问Element官网【组件–Upload上传】 &amp;amp;amp;amp;amp;amp;amp;lt;el-upload action=&amp;amp;amp;amp;amp;amp;quot;https://jsonplaceholder.typicode.com/posts/&amp;amp;amp;amp;amp;amp;quot; list-type=&amp;amp;amp;amp;amp;amp;quot;picture-card&amp;amp;amp;amp;am
vue-cli + ElementUI 裁切上传图片 自定义接口
项目需要引入 vue-cropperjs npm 运行 cnpm install cropper js --save 1、页面中HTML //触发HTML 未定义css &amp;amp;lt;div class=&amp;quot;crop-demo&amp;quot;&amp;amp;gt; &amp;amp;lt;div v-if=&amp;quot;imageUrl==''&amp;quot; class=&amp;quot;pre-img&amp;quot;&amp;a
vue_upload图片上传支持拖拽
vue_upload图片上传支持拖拽,vue_upload图片上传支持拖
vue中同时使用element组件的upload上传图片和wangEditor富文本编辑器
1.wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。 官网:www.wangEditor.com 文档:www.kancloud.cn/wangfupeng/wangeditor3/332599 源码:github.com/wangfupeng1988/wangEditor (欢迎 star) 下载wangEditor:npm install...
在线相册 ,图片上传, 基于 Spring boot vuejs element ui mysql 的项目
最近想学关于vuejs 和 element ui ,趁着工作之余开发了一个在线相册的项目,功能有 注册,登录,预览,各种中心,图片上传,我的资源,图片编辑等,,在此做一个分享吧。1 界面预览1.1 注册页面1.2 主页1.3 个人中心1.4 图片上传界面1.5 我的资源1.6 资源编辑2 好了界面大概就这样的,很简单,其中大量的使用了 element ui,我觉得它是一个非常不错的css库,界面简...
vue+element上传图片
 做的是头像上传,因为一直出错,记录一下 &amp;lt;el-upload class=&quot;img-uploader&quot; action=&quot;/resNavController/uploadPic&quot; :show-file-list=&quot;false&quot; :on-success=&quot;handleUploaderSuccess&quot; multiple=&quot;false&quot;&amp;gt; &amp;lt;img v-if=
vue使用element ui 上传图片并展示
&lt;el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"&gt...
使用Element UI框架(基于vue2.0)的upload组件上传图片至七牛云
整体流程如下: 下面我们开始具体的流程: 一、写一个后台接口,用于生成七牛token 这里我使用的是python的tornado框架写的该接口,接口路由地址:/qiniu/upload/getToken 如果,你的前端和后台项目不是部署在一台服务器上或者部署在一台服务器上端口号不同的情况下,你需要考虑到跨域问题,python后台接口设置允许跨域的简单配置如下: 二、...
vue element组件实现将图片上传到本地
我的qq2038373094 使用的组件 这个组件的作用 1、把用户上传的图片拷贝到千牛云服务器上 2、然后千牛云返回一个图片链接blob:http://localhost:8088/42786950-1ef1-44a3-8315-f3f7d83ed9fc 我们现在要实现的是把用户上传的图片传到本地服务器,然后返回一个本地的形式的链接 1、配置跨域请求 2、更改组件的配...
vue+element-ui表单上传图片post方式
借鉴此文章:https://blog.csdn.net/fsfasgsfd/article/details/53121326(不过此文章js不支持jq,走过的坑) 笔记有段时间了,截图都被背叛了我,能意会的就意会一下,以此也记录一下自己的学习之路 本文是vue+element-ui+node.js+业务层分离,自己写的一些接口,若缺乏规范大家谨慎参考,可以留言告知我,会及时修改。 1、后台用...
vue+element 学习之路(九)vue-cropper 图片裁剪上传
今天在做头像上传需求的时候 发现了一个巨好用的图片裁剪插件,捣鼓了一天踩了不少坑终于取得了“阶段性”的成功,嘿嘿嘿。下面就来总结分享给大家 需求: 用户上传一张图片,进行裁剪功能,裁剪时可以预览,最后以裁剪的图片作为头像使用 思路: 思路步骤其实很简单 1.点击上传头像按钮,打开图片裁剪弹出层。 2.选择图片后,按头像预览进行调整。 3.点击确定,开始裁剪图片,发送请求到后端,并将裁剪的图片上传...
vue2.9 使用croppa实现图像裁剪并上传服务器 (croppa裁剪工具 + element 框架搭建)
  首先安装croppa npm install --save vue-croppa 安装完成之后,在需要的页面引入 import Vue from &quot;vue&quot;; //引用Croppa图片裁剪 import Croppa from &quot;vue-croppa&quot;; import &quot;vue-croppa/dist/vue-croppa.css&quot;; Vue.use(Cr...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法。 刚开始用的是vue-quill-editor结合element-ui上传图片到服务器,name问题来了 按照官方文档上面的方式。下面是我的代码 &lt;template&gt; &lt;div&gt; ...
vue+element上传图片并显示预览图
html代码:  &amp;lt;el-upload class=&quot;avatar-uploader aUpload&quot; action=&quot;&quot;                                      :show-file-list=&quot;false&quot;                                      :on-success=&quot;handleAvatarSuccess&quot;   ...
vue中使用element-ui上传图片编辑回显的
element上传图片回显问题 在项目中会使用到element上传图片预览问题,上传一张也许简单,但是上传多张就有一些坑了,贴上代码 // HTML &lt;div class="form-item-height"&gt; &lt;label class="text-right"&gt;添加商品图片:&lt;/label&gt; &lt;el-upload action="s...
VUE2.0 图片上传功能(移动端)
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none &amp;lt;input @change=&quot;fileChange($event)...
vue+springboot实现头像上传和展示
功能描述:上传头像,以及更换头像,具体实施步骤如下: 1.页面代码 &amp;lt;div class=&quot;set-form&quot;&amp;gt; &amp;lt;div class=&quot;set-pic-upload&quot;&amp;gt; &amp;lt;h3 class=&quot;set-label&quot;&amp;gt;选择本地照片&amp;lt;/h3&amp;gt; &amp;lt;div c
vue element-ui Upload 上传文件图片再次封装
1、添加组件名UploadFile &amp;lt;template&amp;gt; &amp;lt;div class=&quot;upload-container&quot;&amp;gt; &amp;lt;el-dialog :visible.sync=&quot;dialogVisibleImg&quot; :title=&quot;ImgName&quot; append-to-body=&quot;true&quot;&amp;gt; &amp;lt;img wi
关于elementUI upload组件上传图片时携带token的方法
关于elementUI upload组件上传图片时携带token的方法 利用Upload组件中有一个header属性 直接上代码 html: &lt;el-form-item label="头像" :label-width="formLabelWidth" prop="avatar"&gt; &lt;el-upload v-if="dialogStatus == 'create'" ref="u...
spring+element+vue附件上传、下载及在线预览
在springboot+vue框架中使用element的上传控价实现附件的上传、下载,并结合openoffice实现附件的在线预览
VUE使用element UI的upload组件时ios上传图片旋转90度问题
vue使用Upload组件上传图片 &amp;lt;Upload class=&quot;upload&quot; :show-file-list=&quot;false&quot; :action=&quot;getUploadUrl&quot; :before-upload=&quot;beforeUpLoad&quot; ...
vue学习——element-ui的upload功能图片究竟上传到哪了?
&amp;lt;el-upload action=&quot;&quot; accept=&quot;image/jpeg,image/png&quot; :on-change=&quot;onUploadChange&quot; :auto-upload=&quot;false&quot; :show-file-list=&quot;false&quot;&amp;gt; &amp;lt;el-button slot=&quot;trigger&quot; size=&quot
vue element upload实现图片本地预览
vue 使用element实现本地预览 最主要的是将图片路径转换为base64 HTML &amp;amp;amp;lt;el-upload class=&amp;amp;quot;avatar-uploader&amp;amp;quot; action=&amp;amp;quot;123&amp;amp;quot; //这个路径不重要,可以随便写 :show-file-list=&amp;amp;quot;false&amp;amp;quot; :on-success=&amp;amp;q
vue+node+axios实现图片上传
用vue做前端,用axios上传图片,用node做后台接收数据 前端部分 上传图片用的是formData方法上传,用axios上传需要注意的地方: import axios from 'axios' methods:{ getImg(){ //用axios()方法 //需要注意的是在ajax中使用formdata需要配置anync:true,contentType:fal
vue实战026:TinyMCE重写图片上传功能
TinyMCE插入图片默认的是直接插入图片地址的,而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址,前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传,原理是一样的。当我们选择图片后将图片上传服务器,服务器返回相应的图片链接,前端将图片链接插入到富文本的指定光标上位置,在提交富文本的内容的时候图片只是以图片地址提交。 TinyMCE提...
用element的upload组件实现多图片上传和压缩
前端我用element-ui的Upload组件作为基础,vuex做状态管理。后端用的是Django和django-rest-framework。七牛云作为图床。 项目地址:多图片上传组件 效果展示 项目执行流程 首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名...
vue图片上传组件
vue图片上传组件 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记。 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容 接下来说说组件布局那部分直接上代码了 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;uploadImg&quot;&amp;gt; &amp;lt;di...
vue 图片上传组件
vue图片上传组件 vue图片上传组件,实现批量上传和单张上传功能,控制图片大小,数量,以及压缩处理,利用了mint-ui的提示框 监听两个参数,分别是MAX控制最多上传的数量,multiple控制是否批量上传,self.$emit(‘fileChange’, {base64, file, files});将处理后的数据通过自定义事件传递给父组件,父组件获取到压缩处理后的文件就可以使用AJ
elementUI 上传组件 http-request (覆盖默认的上传行为,可以自定义上传的实现)使用
开篇一张图 html代码 &amp;amp;lt;el-dialog title=&amp;quot;批量导入&amp;quot; :visible.sync=&amp;quot;importDialog&amp;quot; width=&amp;quot;30%&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;importDialog-content&amp;quot;&amp;amp;gt; &amp
element-ui图片上传组件实现前端直传阿里云
因公司的项目需求,需要前端图片直接上传阿里云,并且采取的是后端签名后oss上传阿里云。 html代码 &amp;lt;el-upload action=&quot;http://文件目录.oss-cn-beijing.aliyuncs.com&quot; ...
VUE+ElementUI重写默认上传方式
下面是elementUI官网的demo &amp;lt;el-upload class=&quot;upload-demo&quot; ref=&quot;upload&quot; action=&quot;https://jsonplaceholder.typicode.com/posts/&quot; :on-preview=&quot;handlePreview&quot; :on-remove=&quot;handleRemove&quot; :file-list=..
elementUI+koa实现图片上传功能
elementUI中的上传组件为: 大家可以先在自己的项目中运行一下饿了么上传组件 &amp;lt;el-upload action=&quot;https://jsonplaceholder.typicode.com/posts/&quot; list-type=&quot;picture-card&quot; :on-preview=&quot;handlePictureCardPreview&quot; :on-remove=&quot;handleR...
用Vue&ElementUI Upload组件实现自定义顺序上传
产品要求: 最多选择100个文件 每张图最大2M 需要给出每张图上传的结果:成功从列表中删除,失败提示网络错误,大于2m也需要提示 支持重试 遇到的问题: upload组件不支持多文件顺序上传,如果一次性上传100张图,压力有点大 不支持顺序上传的原因,在elementui的源码中,手动调用submit方法时,会过滤status为ready的file,然后开始上传过程,上传过程异步,就会...
Express+Element-ui 使用组件实现上传图片
该demo原码放在github上,不断更新修改。demo组成:Vue2.x(cli3) + express + mongodb,有兴趣的小伙伴可以去看看,可以留下star哦,笔芯 github:https://github.com/ravings/graduation-project 使用第三方插件 formidable 处理表单数据/文件 前端部分: 上传按钮部分:注意:(action里...
vue上传图片组件(支持拖拽文件夹上传)
1.获取拖拽上传对象 drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer); } 2.处理获取到的文件 fileList(fileList) { let files = fileList.files; for (let i = 0; i file
基于Vue的上传+预览图片(类似于微信的发布动态)
基本思路就是先写好基本样式(遮罩啊等等)然后通过当前图片点击获取到图片路径的集合,拿到集合后写个轮播,并且通过一个布尔值控制遮罩层的显示和隐藏。 好吧以上是我的意淫。试了以后是有效果。但是不完美,图片放大事件啥的不知道咋弄,后来用了个比较成熟的PhotoSwipe,研究了一番加上自己稍微的小修改做出来了。给它个赞吧。
springboot+vue+elementui upload组件批量自动/手动上传图片到阿里云OSS
springboot+vue+elementui upload组件批量自动/手动上传图片到阿里云OSS 一、vue upload上传组件 1、自动上传 介绍:当在浏览器打开图片选择弹出框,选中图片后点击确定按钮就会立刻上传。 代码: &lt;!-- html代码 --&gt; &lt;el-upload class="upload-demo" accept="image/png,i...
vue+elementUI表单和图片上传及验证
最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1、表单内容的验证及必填项 2、新增和编辑用同一个组件如何处理数据 3、图片需要和信息一起传递(即不允许自动上传) 4、图片必填的验证问题 针对上述问题作出方案: 1、el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-...
vue中上传视频或图片或图片和文字一起到后端
1.上传图片或视频: 2.图片和文字一起传: 3预览上传的图片(通过监听change事件,解析上传的图片): 预览本地文件也可以通过HTML5的FileReader 4.文件上传,也可以先上传到第三方(如七牛云),再把七牛云返回的key值传给后端 ...
vue上传头像+进度条
&amp;lt;template xmlns:v-on=&quot;&quot;&amp;gt; &amp;lt;div style=&quot;background: #fff;&quot;&amp;gt; &amp;lt;!--&amp;lt;div class=&quot;grzl_txtk&quot; &amp;gt; &amp;lt;div class=&quot;bag_mengc&quot; @click=&quot;sssToggle()&quot;&amp;gt