这期内容当中小编将会给大家带来有关VUE UPLOAD 使用ACTION实现返回上传结果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
通过Upload 的action方法 返回不了结果，可以通过on-success方法中获取返回结果
<Upload accept=".xls, .xlsx" :action="uploadUrl" :on-success="onSuccess" :on-error="handleError" :before-upload="beforeUpload" >
<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>上述就是小编为大家分享的VUE UPLOAD 使用ACTION实现返回上传结果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
