Vue3 + Element UI 实现文件上传弹出框

Vue3 Element UI 实现文件上传

实现如下：

1.首页添加按钮点击弹出文件框

给dialog设置传参 展示对话框，设置

页面部分代码如下：

1.  
   <template>
2.  
   <div @click="showfeedbackDialog = true">
3.  
   <i class="iconfont icon-yijianfankui"></i>意见反馈
4.  
   </div>
5.  
   <Feedback
6.  
   :feedbackDialogShow="showfeedbackDialog"
7.  
   @closeDialog="showfeedbackDialog = false"
8.  
   @updateData="updateData()">
9.  
   </Feedback>
10.  
    </template>
11.  
     

语法部分代码如下：

1.  
   <script setup>
2.  
   import { ref, onMounted, onUnmounted, watch } from 'vue';
3.  
   import Feedback from '../systemConfig/feedbackPage/feedback.vue';
4.  
   import Bus from '@/utils/eventBus.js';
5.  
   let showfeedbackDialog = ref(false);
6.  
   </script>

2.弹出框

页面部分代码如下：

1.  
   <template>
2.  
   <el-dialog
3.  
   v-model="feedbackDialogShow"
4.  
   :close-on-click-modal="false"
5.  
   :before-close="closeDialog"
6.  
   :destroy-on-close="true"
7.  
   class="dialogNormal"
8.  
   >
9.  
   <template #header>
10.  
    <div class="dialogHeader">
11.  
    <div>意见反馈</div>
12.  
    </div>
13.  
    </template>
14.  
     
15.  
     
16.  
    <!-- 意见反馈 -->
17.  
    <el-form
18.  
    ref="ruleFormRef"
19.  
    :model="servicesForm"
20.  
    :rules="rules"
21.  
    label-width="5rem"
22.  
     
23.  
    >
24.  
    <el-row>
25.  
    <el-col>
26.  
    <el-form-item label="问题描述" prop="description">
27.  
    <el-input v-model="servicesForm.description" type="textarea" rows="4" />
28.  
    </el-form-item>
29.  
    </el-col>
30.  
    </el-row>
31.  
    </el-form>
32.  
     
33.  
    <el-form :model="servicesForm" label-width="5rem">
34.  
    <el-row>
35.  
    <el-col
36.  
    ><el-form-item label="页面截图">
37.  
    <el-upload
38.  
    v-model:file-list="picList"
39.  
    ref="upload"
40.  
    action="#"
41.  
    :on-change="uploadPic"
42.  
    :on-remove="removePic"
43.  
    :on-preview="handlePictureCardPreview"
44.  
    :auto-upload="false"
45.  
    :multiple="true"
46.  
    :limit="3"
47.  
    :accept="('.jpg', '.jpeg', '.png', '.PNG')"
48.  
    list-type="picture-card"
49.  
    >
50.  
    <el-icon><Plus /></el-icon>
51.  
    <template #tip>
52.  
    <div class="el-upload__tip">
53.  
    仅支持上传jpg、png格式文件，单个文件大小不超过1M，最多可上传3个文件
54.  
    </div>
55.  
    </template>
56.  
    </el-upload>
57.  
    </el-form-item>
58.  
    </el-col>
59.  
    </el-row>
60.  
     
61.  
    </el-form>
62.  
     
63.  
    <template #footer>
64.  
    <el-config-provider :button="{ autoInsertSpace: true }">
65.  
    <div class="dialogFooter">
66.  
    <el-button @click="closeDialog">取消</el-button>
67.  
    <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
68.  
    </div>
69.  
    </el-config-provider>
70.  
    </template>
71.  
    <el-dialog v-model="dialogVisible" class="dialogSmall">
72.  
    <template #header>
73.  
    <div class="dialogHeader">
74.  
    <div>查看大图</div>
75.  
    </div>
76.  
    </template>
77.  
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
78.  
    </el-dialog>
79.  
    </el-dialog>
80.  
    </template>
81.  
     

语法部分代码如下

1.  
   <script setup >
2.  
   //引入部分
3.  
   import { ElMessageBox } from 'element-plus';
4.  
   import { ref, onMounted, nextTick, watch, reactive } from 'vue';
5.  
   import { addFeedback } from '@/api/feedback.js';
6.  
    
7.  
   //接受来自父组件的feedbackDialogShow
8.  
   const props = defineProps({
9.  
   feedbackDialogShow: {
10.  
    type: Boolean,
11.  
    require: true,
12.  
    default: false,
13.  
    },
14.  
    });
15.  
     
16.  
    let feedbackDialogShow = ref(false);
17.  
    let picList = [];
18.  
     
19.  
    //文件在表格内的类名
20.  
    const servicesForm = ref({
21.  
     
22.  
    description: '', //问题描述
23.  
     
24.  
    });
25.  
     
26.  
    //上传所需内容规则
27.  
    const rules = reactive({
28.  
    description: [{ required: true, message: '请填写问题描述', trigger: 'blur' }],
29.  
    });
30.  
     
31.  
    //上传图片 通过图片的raw.type确定上传类型进行上传验证
32.  
    function uploadPic(UploadFile, UploadFiles) {
33.  
    if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(UploadFile.raw.type) == -1) {
34.  
    ElMessageBox.alert('请上传正确的图片格式', '提示', {
35.  
    confirmButtonText: 'OK',
36.  
    });
37.  
    }
38.  
    }
39.  
     
40.  
    //移除图片 通过找唯一的文件名删除图片
41.  
    function removePic(UploadFile, UploadFiles) {
42.  
    picList.forEach((value, index, array) => {
43.  
    if (value.name == UploadFile.name) {
44.  
    array.splice(index, 1);
45.  
    }
46.  
    });
47.  
    }
48.  
     
49.  
    // 查看图片大图
50.  
    function handlePictureCardPreview(file) {
51.  
    dialogImageUrl.value = file.url;
52.  
    dialogVisible.value = true;
53.  
    }
54.  
     
55.  
    function closeDialog() {
56.  
     
57.  
    feedbackDialogShow.value = false;
58.  
    emit('closeDialog', false);
59.  
    }
60.  
     
61.  
    //上传文件
62.  
     
63.  
    async function submitForm(formEl) {
64.  
    if (!formEl) return;
65.  
    await formEl.validate((valid, fields) => {
66.  
    if (valid) {
67.  
    let formData = new FormData();
68.  
    formData.append('description', servicesForm.value['description']);
69.  
    if (toRaw(picList).length > 0) {
70.  
    let listPicRaw = [];
71.  
    toRaw(picList).forEach(function (e) {
72.  
    listPicRaw.push(toRaw(e).raw);
73.  
    });
74.  
    listPicRaw.forEach((element) => {
75.  
    formData.append('picFiles', element);
76.  
    });
77.  
    } addFeedback(formData).then((data) => {
78.  
    closeDialog();
79.  
    emit('updateData', '');
80.  
    });
81.  
    }
82.  
    });
83.  
    }

上述实现弹出框上传文件事件，当文件上传后需要更新文件管理展示页面，所以需要传一个更新值给父组件，后用bus.$on/emit/传递参数给展示页面 

在父组件语法部分加上

1.  
   function updateData() {
2.  
   Bus.$emit('getFeedbackData');
3.  
   }

在浏览文件页面 添加这一步，当有文件上传后更新文件管理的页面

1.  
   <script setup>
2.  
   onMounted(() => {
3.  
   getData();
4.  
   Bus.$on('getFeedbackData', () => {
5.  
   getData();
6.  
   });
7.  
   });
8.  
   </script>

【vue2 elementUi实现文件上传】指路，另附有一些常用的文件格式​​​​​​​element-ui el-upload实现上传文件以及简单的上传文件格式验证

这篇好文章是转载于：学新通技术网