vue 利用 el-upload上传图片_el-upload 上传正方形照片-优快云博客

本文介绍了一个基于Element UI的证件照上传组件实现，包括正面、反面及手持证件照的上传功能，通过FormData进行文件处理，并使用axios进行POST请求，实现与后端的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div>

<el-form class="form" :model="form" label-position="top">

<el-form-item :label="'证件正面照'" prop="name">
<el-upload
class="avatar-uploader"
:auto-upload="false"
:show-file-list="false"
:multiple="false"
action
:on-change="httpRequestPosi"
>

<div style="width:360px;height:180px" v-if="positive">
<img :src="positive" class="avatar" width="100%" height="100%">
</div>

<div v-else>
<i class="el-icon-upload avatar-uploader-icon"></i>
<div class="el-upload__text">点击上传</div>
</div>
</el-upload>
</el-form-item>

<el-form-item label="证件反面照" prop="idType">
<el-upload
class="avatar-uploader"
:auto-upload="false"
:show-file-list="false"
:multiple="false"
action
:on-change="httpRequestNega"
>

<div style="width:360px;height:180px" v-if="negative">
<img :src="negative" class="avatar" width="100%" height="100%">
</div>

<div v-else>
<i class="el-icon-upload avatar-uploader-icon"></i>
<div class="el-upload__text">点击上传</div>
</div>
</el-upload>
</el-form-item>

<el-form-item :label="'手持证件照'" prop="idNumber">
<el-upload
class="avatar-uploader"
:auto-upload="false"
:show-file-list="false"
:multiple="false"
action
:on-change="httpRequestHand"
>

<div style="width:360px;height:180px" v-if="hand">
<img :src="hand" class="avatar" width="100%" height="100%">
</div>

<div v-else>
<i class="el-icon-upload avatar-uploader-icon"></i>
<div class="el-upload__text">点击上传</div>
</div>
</el-upload>
</el-form-item>
</el-form>

<el-button type="primary" style="width:100%" @click="authClick" :loading="authLoading">提交</el-button>
</div>
</template>

<script>
import axios from "axios";

export default {
name: "imgUpload",
data() {
return {
form: {
realName: "",
certificateType: "",
certificateNo: "",
positive: "",
negative: "",
hand: ""
},
authLoading: false,
// 上传证件照

formDate: "",
action: "接口地址",

// 缩略图
positive: "",
negative: "",
hand: ""
};
},
created() {
this.formDate = new FormData();
},
methods: {
// 上传正面照
httpRequestPosi(file) {
this.form.positive = file.raw;
// 获取缩略图
var that = this;
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function() {
that.positive = reader.result;
};
},
// 上传反面照
httpRequestNega(file) {
this.form.negative = file.raw;
// 获取缩略图
var that = this;
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function() {
that.negative = reader.result;
};
},
// 上传手持照
httpRequestHand(file) {
this.form.hand = file.raw;
// 获取缩略图
var that = this;
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function() {
that.hand = reader.result;
};
},
// 证件上传
authClick() {
this.authLoading = true;
this.formDate.append("realName", this.form.realName);
this.formDate.append("certificateType", this.form.certificateType);
this.formDate.append("certificateNo", this.form.certificateNo);
this.formDate.append("positive", this.form.positive);
this.formDate.append("negative", this.form.negative);
this.formDate.append("hand", this.form.hand);

let config = {
headers: {
Authorization: "token（根据自己的项目获取token）"
}
};
console.log(this.action,this.formDate,config)
axios
.post(this.action, this.formDate, config)
.then(res => {
this.authLoading = false;
if (res.data.code === 0) {
this.$message.success("操作成功");
this.form = {};
this.positive = "";
this.negative = "";
this.hand = "";
} else {
this.$message.error(res.data.message);
this.form = {};
this.positive = "";
this.negative = "";
this.hand = "";
}
})
.catch(() => {
this.authLoading = false;
this.form = {};
this.positive = "";
this.negative = "";
this.hand = "";
});
}
}
};
</script>

<style lang="scss">
.avatar-uploader {
border: 1px dashed #d9d9d9;
width: 360px;
height: 180px;
text-align: center;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-uploader-icon {
font-size: 58px;
color: #8c939d;
text-align: center;
}
</style>