Vue3 + Element UI 实现文件上传
实现如下：
1.首页添加按钮点击弹出文件框
给dialog设置传参 展示对话框，设置
页面部分代码如下：
<template>
<div @click="showfeedbackDialog = true">
<i class="iconfont icon-yijianfankui"></i>意见反馈
</div>
<Feedback
:feedbackDialogShow="showfeedbackDialog"
@closeDialog="showfeedbackDialog = false"
@updateData="updateData()">
</Feedback>
</template>
语法部分代码如下：
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import Feedback from '../systemConfig/feedbackPage/feedback.vue';
import Bus from '@/utils/eventBus.js';
let showfeedbackDialog = ref(false);
</script>2.弹出框
页面部分代码如下：
<template>
<el-dialog
v-model="feedbackDialogShow"
:close-on-click-modal="false"
:before-close="closeDialog"
:destroy-on-close="true"
class="dialogNormal"
>
<template #header>
<div class="dialogHeader">
<div>意见反馈</div>
</div>
</template>
<!-- 意见反馈 -->
<el-form
ref="ruleFormRef"
:model="servicesForm"
:rules="rules"
label-width="5rem"
>
<el-row>
<el-col>
<el-form-item label="问题描述" prop="description">
<el-input v-model="servicesForm.description" type="textarea" rows="4" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form :model="servicesForm" label-width="5rem">
<el-row>
<el-col
><el-form-item label="页面截图">
<el-upload
v-model:file-list="picList"
ref="upload"
action="#"
:on-change="uploadPic"
:on-remove="removePic"
:on-preview="handlePictureCardPreview"
:auto-upload="false"
:multiple="true"
:limit="3"
:accept="('.jpg', '.jpeg', '.png', '.PNG')"
list-type="picture-card"
>
<el-icon><Plus /></el-icon>
<template #tip>
<div class="el-upload__tip">
仅支持上传jpg、png格式文件，单个文件大小不超过1M，最多可上传3个文件
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-config-provider :button="{ autoInsertSpace: true }">
<div class="dialogFooter">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
</div>
</el-config-provider>
</template>
<el-dialog v-model="dialogVisible" class="dialogSmall">
<template #header>
<div class="dialogHeader">
<div>查看大图</div>
</div>
</template>
<img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
</el-dialog>
</el-dialog>
</template>
语法部分代码如下
<script setup >
//引入部分
import { ElMessageBox } from 'element-plus';
import { ref, onMounted, nextTick, watch, reactive } from 'vue';
import { addFeedback } from '@/api/feedback.js';
//接受来自父组件的feedbackDialogShow
const props = defineProps({
feedbackDialogShow: {
type: Boolean,
require: true,
default: false,
},
});
let feedbackDialogShow = ref(false);
let picList = [];
//文件在表格内的类名
const servicesForm = ref({
description: '', //问题描述
});
//上传所需内容规则
const rules = reactive({
description: [{ required: true, message: '请填写问题描述', trigger: 'blur' }],
});
//上传图片 通过图片的raw.type确定上传类型进行上传验证
function uploadPic(UploadFile, UploadFiles) {
if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(UploadFile.raw.type) == -1) {
ElMessageBox.alert('请上传正确的图片格式', '提示', {
confirmButtonText: 'OK',
});
}
}
//移除图片 通过找唯一的文件名删除图片
function removePic(UploadFile, UploadFiles) {
picList.forEach((value, index, array) => {
if (value.name == UploadFile.name) {
array.splice(index, 1);
}
});
}
// 查看图片大图
function handlePictureCardPreview(file) {
dialogImageUrl.value = file.url;
dialogVisible.value = true;
}
function closeDialog() {
feedbackDialogShow.value = false;
emit('closeDialog', false);
}
//上传文件
async function submitForm(formEl) {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
let formData = new FormData();
formData.append('description', servicesForm.value['description']);
if (toRaw(picList).length > 0) {
let listPicRaw = [];
toRaw(picList).forEach(function (e) {
listPicRaw.push(toRaw(e).raw);
});
listPicRaw.forEach((element) => {
formData.append('picFiles', element);
});
} addFeedback(formData).then((data) => {
closeDialog();
emit('updateData', '');
});
}
});
}上述实现弹出框上传文件事件，当文件上传后需要更新文件管理展示页面，所以需要传一个更新值给父组件，后用bus.$on/emit/传递参数给展示页面
在父组件语法部分加上
function updateData() {
Bus.$emit('getFeedbackData');
}在浏览文件页面 添加这一步，当有文件上传后更新文件管理的页面文章来源：https://www.toymoban.com/news/detail-505874.html
<script setup>
onMounted(() => {
getData();
Bus.$on('getFeedbackData', () => {
getData();
});
});
</script>【vue2 + elementUi实现文件上传】指路，另附有一些常用的文件格式element-ui el-upload实现上传文件以及简单的上传文件格式验证文章来源地址https://www.toymoban.com/news/detail-505874.html
到了这里，关于Vue3 + Element UI 实现文件上传弹出框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
