主页 / 网络编程 /

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

网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了VUE UPLOAD 通过ACTION返回上传结果操作，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧

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

<Upload aept=".xls, .xlsx" :action="uploadUrl" :on-suess="onSuess" :on-error="handleError" :before-upload="beforeUpload" style="float:right">
     <Button type="primary" icon="ios-cloud-upload-outline" >导入</Button>
 </Upload>
-----------------------------------------
puted: {
   uploadUrl() {    
   return baseUrl + "/ImportExcel/";   
  }
//file为ImportExcel方法返回的结果
onSuess(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-suess="uploadSuess"
      :on-error="uploadError"
      aept="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-suess="uploadSuess"
      :on-error="uploadError"
      aept="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--form-urlencoded是这个，上传文件需要的是multipart/form-data （这个格式的请求太好认， 一长串有没有，里面包括了文件名…），有时候也会是这样（files: (binary)），都是ok的

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

那就是！！！

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

import url from

2、在data里定义url‘',

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

4、在上传组件的action上

<el-upload
      class="import-btn"
      :action="url+this.uploadUrl" //手动拼地址
      :data="uplaodData"
      name="files"
      :on-suess="uploadSuess"
      :on-error="uploadError"
      aept="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返回上传结果操作就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：JavaScript实现世界各地时间显示 下一篇：vue中element 的upload组件发送请求给后端操作

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by