vue中使用elementUI组件手动上传图片功能

Vue框架简介

Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-ViewModel）设计思想。提供MVVM数据双向绑定的库，专注于UI层面

使用elementUI上传图片时遇到跨域问题，所以需要自己写一个手动上传图片的方法

代码：

html

  <el-upload
            class="upload-demo"
            ref="upload"//绑定ref 清空时会用到
            :limit="1" //最多可上传1张
            :http-request="ImgUploadSectionFile" //上传方法
            :with-credentials="true"
            :auto-upload="true"
            accept=".png,.jpg,.gif,.svg"//上传文件的后缀名
            action=""//文件上传地址 我用的手动上传所以为空
            list-type="list"
            :file-list="fileList">
             <el-button slot="trigger" type="primary">选取图片</el-button>
           </el-upload>

method

 ImgUploadSectionFile(param){//图片上传
      let formData = new FormData();//formdata格式
        formData.append('Img', param.file);
        request.post("url", formData).then(res => {
          if (res.code == 200){//成功
            console.log(res)
          }
        });
    }

我做的是 后台返回上传的图片字符串地址 然后我加到对象中点击总按钮时再发送到后台 所以添加结束之后需要加下面这行代码

this.$refs.upload.clearFiles();//清空

总结

以上所述是小编给大家介绍的vue中使用elementUI组件手动上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

  • vue中使用elementui实现树组件tree右键增删改功能

    vue中使用elementui实现树组件tree右键增删改功能

    功能描述: 1.右击节点可进行增删改 2.可对节点数据进行模糊查询 3.右击第一级节点可以进行同级节点增加 4.双击节点或点击修改节点 都可以对节点获取焦点并进行修改,回车修改成功 5.可对节点进行拖拽,实现节点移动功能 效果图: 完整代码: <template> <div class="lalala tree-container"> <el-input placeholder="输入关键字进行过滤" v-model="fil

  • 基于element-ui组件手动实现单选和上传功能

    前言 在用户使用过程中提出一键导入的功能,需求如下:点击导入按钮显示提示框,然后是单选框以及上传按钮.pc端常使用element-ui组件,但是这个项目是vue1的老项目,并且没有element-ui组件.所以需要自己动手实现单选功能和上传功能. radio 属性及方法 name: 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现) id: 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio value:单选按钮的值,选

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • Vue中利用better-scroll组件实现横向滚动功能

    Vue中利用better-scroll组件实现横向滚动功能

    About 最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件. better-scroll介绍 better-scroll是黄轶大神(没错,我学长)写的基于i-scroll的一个滚动组件,项目地址:https://github.com/ustbhuangyi/better-scroll 一.滚

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • Vue项目引进ElementUI组件的方法

    环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli

  • Vue中使用sass实现换肤功能

    先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样

  • 在vue2.0中引用element-ui组件库的方法

    在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网: http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要

随机推荐