VUE UPLOAD 通过ACTION返回上传结果操作


Posted in Javascript onSeptember 07, 2020

通过Upload 的action方法 返回不了结果,可以通过on-success方法中获取返回结果

<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" style="float:right">
     <Button type="primary" icon="ios-cloud-upload-outline" >导入</Button>
 </Upload>
-----------------------------------------
computed: {
   uploadUrl() {    
   return baseUrl + "/ImportExcel/";   
  }
//file为ImportExcel方法返回的结果
onSuccess(file){
    if(file.code=="1")
    {
     this.$Message.error("导入失败:" + file.msg);
     return;
    }      
   },

补充知识:Element-UI中上传的action地址相对问题

我想要在vue里只出现上传地址后缀,然后具体的上传地址,前缀是项目配置里的服务器地址

1、action直接写相对地址

<el-upload
      class="import-btn"
      :action="/base_data/import_data"
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量导入</el-button>
     </el-upload>

这样的结果,上传请求的的前缀都是本地localhost:8080,并不是我想要的相对服务器的地址

2、屏蔽掉action地址,我自己写请求

<el-upload
      class="import-btn"
      :action="111" //这里随便写,反正用不到,但是又必须要写,无奈
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量导入</el-button>
     </el-upload>

methods里这么写

beforeUpload(file){
  let fd = new FormData();
  fd.append('files',file);//传文件
  fd.append('id',this.srid);//传其他参数
  axios.post('/api/up/file',fd).then(function(res){
      alert('成功');
  })
  return false //屏蔽了action的默认上传
},

这样的吧但是这样的我发过去的东西老是空的,应该是我不太懂FormData()的用法吧,但是我单独用FormData()的get方法,都能get到,后来发现是因为文件编码问题

默认的文件编码application/x-www-form-urlencoded是这个,但是上传文件需要的是multipart/form-data (这个格式的请求太好认, 一长串有没有,里面包括了文件名…),当然有时候也会是这样(files: (binary)),都是ok的

啊~,真的要郁闷了,最后还是让我发现了一种办法

那就是!!!

1、把全局配置的服务器地址引入

import url from '@/http/http'

2、在data里定义url:‘',

3、在create方法里this.url = url;

4、在上传组件的action上

<el-upload
      class="import-btn"
      :action="url+this.uploadUrl" //手动拼地址
      :data="uplaodData"
      name="files"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      accept="xlsx,xls"
      :show-file-list="false">
      <el-button class="btn light small"><i class="icon iconfont icon-piliangdaoru"></i>批量导入</el-button>
     </el-upload>

好了,都好了,相对地址是服务器地址,上传文件编码也是multipart/form-data

以上这篇VUE UPLOAD 通过ACTION返回上传结果操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
You might like
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
服务器web工具 php环境下
2010/12/29 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python手写均值滤波
2020/02/19 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
学校元旦晚会方案
2014/02/19 职场文书
保护环境倡议书
2014/04/14 职场文书
超市客服工作职责
2014/06/11 职场文书
保送生自荐信范文
2015/03/26 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
公司承诺书格式范文
2015/04/28 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
MySQL Server 层四个日志
2022/03/31 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技