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+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
使用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实现的构造sql语句类实例
2016/02/03 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
php实现记事本案例
2020/10/20 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
js实现秒表计时器
2019/12/16 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
UNIX命令速查表
2012/03/10 面试题
小学庆六一活动方案
2014/02/28 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
公司节能减排倡议书
2014/05/14 职场文书
项目建议书怎么写
2014/05/15 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
个人授权委托书格式
2014/08/30 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
学生会主席任命书
2015/09/21 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
干部理论学习心得体会
2016/01/21 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫