Vue项目中使用Cube-UI的Upload组件上传图片 2018-12-23

Vue项目中使用Cube-UI框架制作表单页面遇到的问题

在我的使用上来看，Cube-UI的使用上相对其他UI框架较为简单。

在项目中遇到了上传图片的问题。

实际上也是自己从未遇到过上传图片的需求。

---

各种参数就不复写了，自习阅读文档就能看懂。主要用到的就是files-added。

files-added方法中有一个参数files，files是存放原始文件的数组。

image

组件代码

自动上传必须要关掉，如果你的项目是使用form表单提交上传，action中可以填写地址。

我的项目中使用的是axios先上传图片返回图片ID，再提交表单时连同其他信息一起上传到服务器。

js代码

filesAdded(files) {

      //取图片文件，这里只取了数组中第一张图片

      this.getData(files[0]);

    },

    //封装的axios方法

    getData(file) {

      var that = this;

      var file = file;

      //fd发送的内容

      //注意要是FormData类型

      var fd = new FormData();

      //将传过来的file，也就是files[0],加入fd，这里是服务器接口中接收的参数imagefile

      fd.append("imagefile", file);

      var data = api(

        that.$parent.$data.website + "/Mallapi/UpdataFile",

        //发送的内容

        fd,

        "post"

      );

      data.then(function(data) {

        console.log(data);

      });

    }

这是我的思路，昨天刚成功，记录一下，希望可以帮到需要的人。