el-upload上传图片
<template>
<el-container>
<div :class="{'hideAddBtn':}">
<el-upload
:action="uploadImage"
:headers="{ token:jdb_token }"
:limit="1"
:file-list="fileList"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-remove="handleRemove"
:before-upload="beforeUpload"
accept=".jpg, .jpeg, .png, .gif, .bmp"
list-type="picture-card"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-container>
</template>
<script>
import searchArticle from "../../../api/";
import { mapState } from "vuex";
export default {
data() {
return {
fileList: [],
uploadImage: process.env.VUE_APP_API + searchArticle.uploadImage
};
},
computed: {
...mapState(["jdb_token"])
},
methods: {
beforeUpload(file) {
//上传图片前
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("图片大小不能超过 2MB!");
}
return isLt2M;
},
handleSuccess(file, fileList) {
//此处的fileList是个对象
//上传成功
if (file.code === 200) {
this.fileList.push(fileList);
}
},
handleExceed() {
//图片超出上限
this.$message.error("当前限制选择 1 个文件");
},
handleRemove(file, fileList) {
//移除图片
this.fileList = [];
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .hideAddBtn .el-upload--picture-card {
display: none;
}
</style>