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 相关文章推荐
json 定义
Jun 10 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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
香妃
2021/03/03 冲泡冲煮
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python 处理数据的实例详解
2017/08/10 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书