Vue项目中使用Cube-UI框架制作表单页面遇到的问题
在我的使用上来看，Cube-UI的使用上相对其他UI框架较为简单。
在项目中遇到了上传图片的问题。
实际上也是自己从未遇到过上传图片的需求。
各种参数就不复写了，自习阅读文档就能看懂。主要用到的就是files-added。
files-added方法中有一个参数files，files是存放原始文件的数组。
image
组件代码
<cube-upload
ref="upload"
action="# "
:auto="false"
:simultaneous-uploads="1"
@files-added="filesAdded"
/>
自动上传必须要关掉，如果你的项目是使用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);
});
}
这是我的思路，昨天刚成功，记录一下，希望可以帮到需要的人。
