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

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');
}

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

<script setup>
onMounted(() => {
  getData();
  Bus.$on('getFeedbackData', () => {
    getData();
  });
});
</script>

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