图片上传
<pre><code class="language-javascript"><template>
<el-upload
class="avatar-uploader"
action="/adm/reviewClient/upload"
:data="uploadData"
:show-file-list="false"
:accept="['.jpg','.png','.jpeg']"
:auto-upload="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<div slot="trigger" style="width: 100%; height: 100%">
<slot name="triggerBtn"></slot>
</div>
</el-upload>
</template>
<script>
export default {
name: 'UploadImage',
props: {
fileType: {
type: Array,
default() {
return ['image/jpg', 'image/png', 'image/jpeg'] //png jpg jepg
},
},
errorTypeTip: {
type: String,
default: '上传图片只能是 JPG 、 PNG 或 JPEG 格式!',
},
},
data() {
return {
uploadData: {
},
}
},
computed: {},
mounted() {
},
methods: {
beforeAvatarUpload(file) {
const type = this.fileType.includes(file.type)
if (!type) {
this.$message.warning(this.errorTypeTip)
return false
}
return true
},
handleAvatarSuccess(response, file, fileList) {
if (response.code === '0') {
this.$emit('getImg', {
...response.data
})
}
},
},
}
</script>
<style>
.avatar-uploader >>> .el-upload {
position: relative;
background-color: #ccc;
}
.avatar-uploader >>> .el-upload .avatar-uploader-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
.avatar-uploader >>> .el-upload {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
</code></pre>