关闭

el-upload 与 FormData上传文件

1795人阅读 评论(2) 收藏 举报
分类:

最近在用el-upload做上传图片的功能,用的el-uplod中的点击上传做。但是
点击上传的时候。不会触发action中的post请求,所以就干脆在on-change函数里写入原生的FormData上传文件的方法。

getImgUrl () {
    var fileValue = document.querySelector('.el-upload .el-upload__input')
    var fd = new window.FormData()
    // 配置post请求的参数。参数名file,后面跟要传的文件,参数名fileType,值为category(看后端的具体要求)
    fd.append('fileType', 'category')
    fd.append('file', fileValue.files[0])
    var xhr = new XMLHttpRequest()
    xhr.open('POST', url, true)
    // url就是要发送的post请求的地址
    xhr.send(fd)
    xhr.onload = () => {
      if (xhr.status === 200) {
        this.imgurl = JSON.parse(xhr.responseText).url
        console.log(this.imgurl)
      }
    }
  },
  handleOnchange () {
    this.getImgUrl()
  }

还好el-upload里面有on-change这个回调函数。在on-change这个回调函数中直接用原生的FormData和XML来实现请求的发送。最后会拿到xhr.responseText这个字符串文本,需先将文本转化为json对象。然后用.url拿到服务器请求回来的url图片地址。

这里值得注意。在xhr.onload要写成箭头函数的形式。this.imgurl中的this才是Vue实例对象。如果把xhr.onload写成ES5的形式

xhr.onload = function () {
    console.log(this)
}

这里的this只的就是xml对象了。注意vue项目中的this指向问题

el-upload中的点击上传不会触发action写的post请求。但是el-upload的用户头像上传就会触发action中的post请求。可能自己的结论不准确。望朋友们多多提意。

0
0
查看评论

VUE2.0 element upload使用

<template> <div class="uptemp"> <el-upload class="upload-demo" ref="upload" multi...
  • m0_38069630
  • m0_38069630
  • 2017-09-29 11:29
  • 2337

在vue项目中使用element-ui的Upload上传组件

<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :...
  • qq_39685062
  • qq_39685062
  • 2017-08-10 10:19
  • 11235

Vue 之Element ui 中upload的那些事

最近在适用VUE作为前端框架做自己的项目,在做到需要上传文件到服务器时,同事告诉我upload之中的action也就是上传地址不能动态的去更改,然后去看了一下,需要做以下处理才能动态的使用:action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法...
  • Longyu144714
  • Longyu144714
  • 2017-09-27 11:16
  • 3274

vue2.0 使用element-ui里的upload组件实现图片预览效果

1.首先我们在cli中引入element-ui  2.然后在具体的代码中放入uoload组件 点击上传 只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提供的接口:on-change回调函数,...
  • a12541254
  • a12541254
  • 2018-01-11 17:42
  • 226

springMVC 获取本地项目路径 以及上传文件的方法整理

//获取本地项目路径 String path=request.getSession().getServletContext().getRealPath("upload/img/product"); //二进制上传MultipartHttpServletRequest multip...
  • fantianmi
  • fantianmi
  • 2014-07-31 15:14
  • 3028

java 后台项目 上传文件放置路径

java项目传统的上传文件都会放到工程根目录建一个文件夹,放置上传的文件,但是多人发布或者使用自动化部署工具经常误操作或者忘记备份upload文件夹导致上传的图片、资料、视频等丢失; 1:传统的直接放上传文件到工程跟目录访问特别方便,但是服务器访问路径+文件的存放的相对路径就可以;但是操作tom...
  • ab601026460
  • ab601026460
  • 2017-06-11 21:43
  • 3508

Element-ui框架修改-upload、step

Element-ui框架修改-2017.09.04 【upload】 需求-照片墙只上传一张,上传之后上传按钮消失 修改地址-Packages-upload-src-index  添加方法 hidePictureCardUpload() { document.getElem...
  • qing_huan_wei_er
  • qing_huan_wei_er
  • 2017-09-04 17:21
  • 1874

视频电商网站实战 - 构建视频提交页面:视频封面上传(上)

[上节课](http://blog.csdn.net/github_26672553/article/details/54615267 )我们已经初步构建了一个『发布视频』的界面,本节课我们来完善参考Element-UI文档:http://element.eleme.io/#/zh-CN/comp...
  • github_26672553
  • github_26672553
  • 2017-02-07 09:36
  • 1079

使用elementUI实现将图片上传到本地

查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/#/zh-CN/component/upload 前台的页面代码为: <el-upload class="upload-demo" ...
  • qq_36752632
  • qq_36752632
  • 2017-09-08 17:42
  • 5419

七牛云图片上传:使用element-ui的upload组件

昨天问了一下element团队,他们还没有试过用element-ui的upload组件传图片到七牛云 我试了一天发现没问题,同时觉得七牛并没有一个前端后端流程都演示到的demo,于是再次记录一波 流程 后端配置好七牛相关的accessKey后端构建好上传策略,用来生成消费次数只有1...
  • lupeng0206
  • lupeng0206
  • 2017-05-04 19:31
  • 10207
    个人资料
    • 访问:20111次
    • 积分:677
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:0篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论