Element-UI中上传的action地址相对问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)