1 Html
<el-form-item label="图片" prop="picUrl" :label-width="formLabelWidth">
<el-upload
v-model="form.picUrl" // 表单提交对象
:action="actionImg" // 图片上传地址,
list-type="picture-card"
:on-success="successImg" //图片上传完成的回调
auto-upload
:headers="headers" // 请求头
ref="upload">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
2 Js
// 图片上传的 请求头
computed: {
headers() {
return {
Authorization: window.sessionStorage.getItem("token")
};
}
}
// 图片上传完成的回调
successImg(response, file, fileList) {
if (response) { // 按各自后端需要来写,图片数据都在response里面
this.form.picUrl = response.data.url;
this.form.remotePath = response.data.remotePath;
}
},
// 确定按钮
addSubmit(from) {
this.$refs[from].validate(async valid => {
if (valid) {
if (this.form.picUrl == "") { //判断图片有没有上传成功
this.$message.error("请选择图片");
return false;
}
// 成功 提交数据
let res = await this.$axios.post("/product/save", this.form);
if (res.data.code != 0) {
this.$message.error(res.data.message);
} else if (res.data.code == 0) {
this.$message.success("新增成功");
}
}
});
},