重点代码
<el-upload
action=""
list-type="picture-card"
:on-change="aa" //重点代码
:auto-upload="true" //false是默认不上传--这个地方需要改成true,
:limit="1"> //1代表只能上传1张图片
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
pit: new FormData(), //重点代码
};
},
methods: {
aa(file) { //重点代码aa(file)
this.pit.append("articleCover", file.raw);
},
Submit(){ //重点代码(点击提交的按钮)
this.pit.append("xxx", this.xxx); //传其他参数-
this.pit.append("xxx", this.xxx); //传其他参数
....等等等
this.$axios({
method: "post",
url: "Articlemessage/insertArticlemessage", //后台给我的接口
headers: {
"Content-Type": "multipart/form-data",
},
data: this.pit,
})
.then((res) => {
console.log("res.data", res.data);
if (res.data.status == 200) {
this.$message({
message: res.data.msg,
type: "success",
});
}
})
.catch((err) => {
console.log("error", err);
});
},
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
}
}
}
</script>
《前腾讯员工教我的方法》