Vue+element通过接口上传图片给后端
最近碰到一个项目要求需要上传给后端图片进行验证 话不多说 直接上代码 也等于给自己一个备份在碰见类似的可以再过来看一看。
·
最近碰到一个项目要求需要上传给后端图片进行验证 话不多说 直接上代码 也等于给自己一个备份在碰见类似的可以再过来看一看
<template>
<!-- <avue-form :option="option" v-model="form">
</avue-form> -->
<div class="uploadimg">
<el-upload ref="upload"
:action="url"
list-type="picture-card"
accept="image/*"
:file-list="fileList"
:limit="limit"
:auto-upload="false"
:before-remove="beforremove"
:on-preview="handlePictureCardPreview"
:on-exceed="handleExceed"
:on-change="handlechange">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传人脸照片</el-button>
</div>
</template>
<script>
import { collection } from "@/api/system/user"; 封装好的上传地址 后端接口
export default {
data() {
return {
// url: //上传的地址
fileList: [],
formData: {},
dialogImageUrl: '',
limit: 3,
dialogVisible: false,
}
},
mounted() {
this.fileList = []
},
methods: {
async submitUpload() {
let formData = new FormData();
this.formData.forEach(file => {
formData.append('pic', file.raw);
})
var that = this;
//调用上传接口
collection(formData).then(res => {
console.log("上传结果", res);
this.$message({
type: "msg",
message: res.data.msg,
});
})
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 ${this.limit} 个文件`);
},
// beforremove(file, fileList) {
// this.$message.warning(`禁止删除`);
// return false;
// },
handleRemove(file, fileList) {
this.checkLimit(fileList);
console.log("删除文件:", file);
this.fileList = fileList;
},
handlechange(file, fileList) {
this.formData = fileList;
this.checkLimit(fileList)
},
/**
* @description: 检查文件长度, 若与限制长度相同则隐藏上传按钮
* @param {*} filelist 上传文件列表
* @return {*}
*/
checkLimit(filelist) {
const limit = this.limit
const uploadDom = this.$refs['upload'];
if (filelist.length === limit) {
uploadDom.$children[1].$el.style.display = 'none'
} else {
uploadDom.$children[1].$el.style.display = ''
}
},
handlePictureCardPreview(file) {
console.log("文件预览:", file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
},
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)