1、使用el-upload
<el-form-item label="轮播图4:" prop="photo">
<el-upload
action=""
:limit="1"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
:auto-upload=false
list-type="picture-card"
:on-change="onchange"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
将action设置为空,auto-upload自动上传设置为“false”,我们的自动上传放在onchange里,在upload标签发生变化时(即上传了图片),在onchange函数里实时将图片传到后台
2、设置data
data() {
return {
form: {
name: ''
},
param:"",//表单要提交的参数
dialogImageUrl: '',
dialogVisible: false,
src: ''
}
}
3、在onchange里新建表单formData
onchange(file,filesList) {
this.param = new FormData();
this.param.append('img', file.raw, file.name); //图片信息
this.param.append('name', "abc"); //接口所需其余字段
this.imgSubmit();
}
4、设置imgSubmit,使用axios提交接口
axios.post('/img',image_property)
.then(function (res) {
console.log("success",res.data);
}).catch(function (err) {
console.log("error",err)
})
最终效果