vue3+naiveui 图片文件上传封装组件

适用于vue3+naiveui的图片、文件上传形式：

<template>
  <!-- 公共文件上传组件，包含图片、文件等 -->
  <div class="uploadPage">
    <n-upload
      v-model:file-list="fileList"
      v-if="listType == 'image-card'"
      :accept="fileType"
      :list-type="listType"
      :max="maxNum"
      show-download-button
      @change="changeFile"
    >
      上传文件
    </n-upload>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { fileUpload, fileDelete } from '@/services';

export default {
  name: 'uploadPage',
  props: {
    saveFileArr: Array, //保存的文件数组编号
    fileType: String, //文件类型格式 image-card(照片墙)  image  text
    maxNum: Number, //最大上传文件数
    listType: String, //文件形式  .doc,.docx,.pdf,.xls,.xlsx,.zip,.rar,.jpg,.png,.jpeg,.svg,.gif
  },
  setup(props, context) {
    const allData = reactive({
      fileList: [],
      maxNum: props.maxNum ? props.maxNum : 10,
    });
    // 文件上传和删除
    const changeFile = async file => {
      console.log(file, '文件上传');
      if (file.event) {
        // 文件上传
        let formdata = new FormData();
        formdata.append('files', file.file.file);
        let config = {
          headers: { 'Content-Type': 'multipart/form-data' },
        };
        let res = await fileUpload(formdata, config);
        if (res && res.code === 0) {
          if (res.list.length > 0) {
            let datas = res.list[0];
            props.saveFileArr.push(datas);
          }
        } else {
          allData.fileList = [];
          let param = {
            id: file.file.id,
            name: file.file.name,
            status: 'error',
          };
          allData.fileList.push(param);
        }
      } else {
        // 文件删除,根据文件名进行匹配
        let fileIndex = null;
        props.saveFileArr.map((item, index) => {
          if (file.file.name == item.fileOriginalName) {
            fileIndex = index;
          }
        });
        let fileNos = [];
        fileNos.push(props.saveFileArr[fileIndex].fileNo);
        let res = await fileDelete(fileNos);
        if (res && res.code === 200) {
          props.saveFileArr.splice(fileIndex, 1);
        }
      }
    };
    onMounted(() => {
      // 修改时图片回显
      allData.fileList = [];
      if (props.saveFileArr.length > 0) {
        props.saveFileArr.map(item => {
          let params = {
            id: item.fileNo,
            name: item.fileOriginalName,
            status: 'finished',
            url: item.fileCloudStorageKey,
          };
          allData.fileList.push(params);
        });
      }
    });
    onBeforeMount(() => {
      allData.fileList = [];
    });
    return {
      ...toRefs(allData),
      changeFile,
    };
  },
};
</script>
<style lang="less">
.uploadPage {
  width: 100%;
}
</style>

其他组件调用方式（图片、文件）：

备注：saveFileArr是表单提交保存的目标数组；maxNum是最大上传数量        
<UploadFile
    :saveFileArr="formInfo.data.fileList"
    fileType=".jpg,.png,.jpeg,.svg,.gif"
    listType="image-card"
    :maxNum="maxNum"
 />
<UploadFile
    :saveFileArr="formInfo.data.fileList"
    fileType=".doc,.docx,.pdf,.xls,.xlsx,.zip"
    listType="image-card"
    :maxNum="maxNum"
 />

修改时图片回显直接赋值接口返回的数组即可；

fileList:[
    {
        "id": 1075,
        "fileNo": "1541694002122993666",
        "fileExtension": "jpeg",
        "fileOriginalName": "111.jpeg",
        "fileCloudStorageKey": "http://test.com/2206281604282012923872.jpeg",
        "fileAbbreviatedCloudStorageKey": "http://test.com//2206281604282012923872.jpeg",
        "fileUploadType": "0",
        "fileUploadTypeDesc": "图片",
        "typeSelection": null,
        "typeSelectionDesc": null,
        "generationTime": "2022-06-28 16:04:27",
        "updateTime": "2022-06-28 16:04:27",
        "fileFounder": "admin",
        "siteReserve1": null,
        "siteReserve2": null,
        "siteNo": null
    }
]