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 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JS如何判断json是否为空
Jul 06 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 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,不用COM,生成excel文件
2006/10/09 PHP
php&amp;java(二)
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
js获取域名的方法
2015/01/27 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
angularJS开发注意事项
2018/05/26 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python 布尔操作实现代码
2013/03/23 Python
python回调函数中使用多线程的方法
2017/12/25 Python
带你认识Django
2019/01/15 Python
分析经典Python开发工程师面试题
2019/04/08 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
若干个Java基础面试题
2015/05/19 面试题
小学生操行评语
2014/04/22 职场文书
大学活动总结格式
2014/04/29 职场文书
我的老师教学反思
2014/05/01 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
领导欢送会主持词
2015/07/06 职场文书
高中政治教师教学反思
2016/02/23 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript