最新公告
  • 欢迎您光临奇兔源码社区,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 这篇文章主要介绍了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返回上传结果操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.qitupic.com",如遇到无法解压的请联系管理员!

    成华区美乐滋网络工作室|奇兔源码网 » VUE UPLOAD 通过ACTION返回上传结果操作

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台