zoukankan      html  css  js  c++  java
  • vue-resource+element upload上传(遇到formData总是变为object格式)

    文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了。。。

    写此博记录下遇到的问题。

    传参给后台需要formdata格式的,这种格式也很常见,如下:

    // FormData 对象

    var form = new FormData();

    // 文件对象

    form.append("file", fileObj);

    // 其他参数

    form.append("xxx", xxx);

    但是有一点,我发现我怎么传,控制台始终都是这样,如下截图:(估计你们都比我聪明。。此处想打自己一下!!

    然后找了半天没发现为什么,后来发现element里的上传是组件里已经定义好的,不用再去写post请求,formData格式也不用定义。。。

     官网文档写得很详细,action就是post请求的路径,字符串格式,headers是头部,data为其他附加参数;

    以下是我们的业务需求:

    我们业务逻辑是这样,弹框内部有个上传按钮,点击上传按钮时去调取本地文件,等到点击弹框的确定按钮之后才会上传到服务器,然后代码如下:

    data是这样定义的,需要自己设置X-token:

     

    这是点击弹框的确定按钮执行的方法,通过submit()方法,很简单:

    这个是判断文件格式是否符合规范,很多人在before-upload这个方法里判断这些,但是你会发现有个问题,就是你执行此方法时无论上传格式是否正确们都会触发before-remove或者是on-remove这两个方法,很奇怪,可能是element组件的bug,所以需要加个判断,以下图中的isDel就是这层判断:

    以下是判断删除的方法:

     还有就是上传成功后的逻辑处理:

    记录下这次的坑,希望以后长点心;

  • 相关阅读:
    loadrunner 字符集与检查点的探讨
    oracle使用游标进行循环数据插入
    QTP之WinMenu对象的测试
    VBS数组深入浅出
    Loadrunner 如何访问数据库
    loadrunner字符串处理函数
    动态SQL现实一个表中求多列的和
    oracle中WMSYS.WM_CONCAT函数的版本差异
    强制卸载LINUX系统自带JDK
    loadrunner调用QTP脚本来实现性能测试(一次现场特殊需求的解决方案)
  • 原文地址:https://www.cnblogs.com/fmixue/p/9968910.html
Copyright © 2011-2022 走看看