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


Posted in Javascript onDecember 13, 2019

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组件手动上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
微信小程序关键字变色实现代码实例
Dec 13 #Javascript
Servlet返回的数据js解析2种方法
Dec 12 #Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 #Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 #Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JS backgroundImage控制
2009/05/19 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
JS随机排序数组实现方法分析
2017/10/11 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
python学生管理系统代码实现
2020/04/05 Python
老生常谈python中的重载
2018/11/11 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python如何省略括号方法详解
2020/03/21 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python 录制系统声音的示例
2020/12/21 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
公司请假条格式
2014/04/11 职场文书
应届生找工作求职信
2014/06/24 职场文书