栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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


     
 
-----------------------------------------
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直接写相对地址


      批量导入
     

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

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


      批量导入
     

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上


      批量导入
     

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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/68750.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号