lct

Your Name

2022-08-15 87edc55a377c3fca459ab48010a9716b0311c4a8

 src/components/uploaderImg/index.vue

@@ -1,7 +1,8 @@
<template>
   <el-upload
         v-model:file-list="fileList"
         action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :disabled="disabled"
      :http-request="uploadSectionFile"
         list-type="picture-card"
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
@@ -16,9 +17,12 @@
   </el-dialog>
</template>
<script lang="ts">
   import { ref,defineComponent } from 'vue'
   import { Plus } from '@element-plus/icons-vue'
   import type { UploadProps, UploadUserFile } from 'element-plus'
import axios from 'axios';
import { ref, defineComponent,onMounted,watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { ElMessage } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';

   export default defineComponent({
      props: {
@@ -26,31 +30,117 @@
         fileList: {
            type: Array,
         },
      disabled: {
         type: Boolean,
         default: () => false,
      },
      systemName: {
         type: String,
         default: () => '',
      },
      },
      components: {
         Plus
      Plus,
      },
      setup() {

         const dialogImageUrl = ref('')
         const dialogVisible = ref(false)
   setup(props, { emit }) {
      const dialogImageUrl = ref('');
      const dialogVisible = ref(false);

         const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
            console.log(uploadFile, uploadFiles)
         }
         console.log(uploadFile, uploadFiles);
      };

         const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            dialogImageUrl.value = uploadFile.url!
            dialogVisible.value = true
         }
         dialogImageUrl.value = uploadFile.url!;
         dialogVisible.value = true;
      };

         const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles)  => {
            console.log(response, uploadFile,uploadFiles)
         }
         console.log(response, uploadFile, uploadFiles);
      };
         const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles)  => {
            console.log(error, uploadFile,uploadFiles)
         console.log(error, uploadFile, uploadFiles);
      };
      watch(props.fileList, (val) => {
         viewList.value = val
         // searchFile()
      });
      onMounted(() => {
         if(props.fileList){
            viewList.value = props.fileList
            // searchFile()
         }else {
            viewList.value = []
         }

      });
      const newFileList = ref([])
      const viewList = ref([])
      const searchFile = async () => {
         for(var a = 0;a<props.fileList.length;a++){
            await goalManagementApi()
                  .searchFile(props.fileList[a].fileName)
                  .then((res) => {
                     props.fileList[a].url = res.data
                  })
         }
      };
      const uploadSectionFile = (param) => {
         let form = new FormData();
         form.append('file', param.file);
         //组装文件名（传入后缀名）
         var fileName1 = getFileName(param.file.type.split('/')[1], 1);
         var fileName2 = getFileName(param.file.type.split('/')[1], 2);
         goalManagementApi()
            .beforeUploadFile(fileName1, fileName2)
            .then((res) => {
               // 转换形式
               const reader = new FileReader();
               reader.readAsArrayBuffer(param.file);
               // 上传图片
               reader.onload = () => { // 上传图片接口 url:上传图片地址 修改请求头
                  axios.put(res.data.uploadUrl, reader.result,
                     {
                        header:
                           { "Content-Type": "multipart/form-data" }
                     }
                  )
                  .then(res1 =>
                  {
                     props.fileList[props.fileList.length-1].fileName=res.data.fileName
                     props.fileList[props.fileList.length-1].fileUrl=''
                     emit('successUploader',props.fileList);
                     ElMessage({
                        showClose: true,
                        message: '上传成功',
                        type: 'success',
                     });
                  })
               };
            });
      };
      const getFileName = (suffix, type) => {
         var projectName = props.systemName;
         var date = getNowDate();
         var fileName1 = projectName + '/' + date + '_';
         var fileName2 = '.' + suffix;
         if (type == 1) {
            return fileName1;
         } else if (type == 2) {
            return fileName2;
         }
         return '';
      };

      //获取当前年月日
      const getNowDate = () => {
         var a = new Date().getTime(); //获取到当前时间戳
         var now = new Date(a); //创建一个指定的日期对象
         var year = now.getFullYear(); //年份
         var month = now.getMonth() + 1; //月份（0-11）
         var date = now.getDate(); //天数（1到31）
         return year + '-' + month + '-' + date;
      };

         return {
            dialogImageUrl,
@@ -58,7 +148,9 @@
            handleRemove,
            handlePictureCardPreview,
            successFile,
            errorFile
         errorFile,
         uploadSectionFile,
         viewList
         };
      },
   });