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

这篇文章主要介绍了VUE UPLOAD 通过ACTION返回上传结果操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

通过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返回上传结果操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

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

阿强爱分享
  • 本文由 发表于 2020年10月6日12:31:37
  • 转载请务必保留本文链接:https://iooqp.cn/1945.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: