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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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网站在线人数统计
2008/04/09 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Linux内核产生并发的原因
2012/07/13 面试题
实习教师自我鉴定
2013/12/09 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
给导游的表扬信
2014/01/10 职场文书
司机辞职报告范文
2014/01/20 职场文书
中专自我鉴定
2014/02/05 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
个人年底工作总结
2015/03/10 职场文书
微观世界观后感
2015/06/10 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Java线程的6种状态与生命周期
2022/05/11 Java/Android