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 闭包在封装函数时的简单分析
Nov 28 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JS中数组重排序方法
Nov 11 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
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生成带有雪花背景的验证码
2006/10/09 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
FireFox JavaScript全局Event对象
2009/06/14 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
工程监理应届生求职信
2013/11/09 职场文书
中秋节主持词
2014/04/02 职场文书
公司贷款承诺书
2014/05/30 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
热爱劳动主题班会
2015/08/14 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android