vue-cli + ElementUI 实现自定义接口上传图片

1、使用ElementUI风装好的方法

<el-upload class="upload-demo"
:before-remove="beforeRemove" //移除前动作
:on-remove="handleRemove" //移除时动作
:action="action" //上传接口
:show-file-list="true"  //是否显示文件列表
:http-request='httprequest' //拦截上传动作
:before-upload="beforeupload" //选择完图片钩子
:file-list="fileList" //展示图片列表data
list-type="picture-card" multiple>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

参数解释再ElementUI官网

2、在data里定义需要用到的参数（可能有遗漏）

imageUrl:'',
action:'', //上传接口 例子中接口需要封装formdata上传
fileList: [],
imgname:'',
delfileuid:'',

3、在methods中定义方法

//点击移除图片时
beforeRemove(file, fileList) {
this.delfileuid = file.uid;
console.log(file.uid);
return this.$confirm(`确定移除 ${ file.name }？`);
},
//移除图片动作
handleRemove(file, fileList) {
var that=this;
console.log(that.delfileuid)
for(let i=0;i<that.fileList.length;i++)
{
if(that.fileList[i].uid == that.delfileuid){
that.fileList.splice(i,1)
console.log(that.fileList)
}
}
},

//阻止upload的自己上传，进行再操作
beforeupload(file) {
this.imgname =  file.name;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
else{
////////console.log(file);
//创建临时的路径来展示图片
// var windowURL = window.URL || window.webkitURL;
// this.imageUrl=windowURL.createObjectURL(file);
this.param = new FormData();
this.param.append('imgFile', file, file.imgFile);
var names = this.form.imgFile;
//下面append的东西就会到form表单数据的fields中；
this.param.append('message', names);
}
return isLt2M;
},
httprequest() {
var that=this;
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
this.$axios.post(this.action, this.param, config).then(function(res) {
if(res.data.invokeResultCode == 200){ //本项目中判断接口返回code
that.$message.success("上传成功");
that.imageUrl=res.data.data.url;
that.fileList.push({name: that.imgname, url:res.data.data.url })
}
else{
this.$message.error(res.data.invokeResultMessage);
}
}).catch((res) => {
this.$message.error('请稍候重试或联系管理员');
})
},