2024-05-12T07:56:37.758Z

0

전체 소스 첨부 합니다.

첨부파일 부분 q-upload 관련 해서 개별 항목의 Status: failed 가 출력되고
전체 항목부분에도 0.00% 로 출력됩니다.
페이지 전체 소스 첨부 합니다.
선배님들의 의견 부탁 드립니다.

<template>
  <q-form @submit.prevent="handleSubmit">
    <q-card-section class="q-gutter-y-sm">
      <q-input
        v-model="titleModel"
        outlined
        placeholder="제목"
        :rules="[validateRequired]"
        counter
        maxlength="40"
      />
      <q-select
        v-model="isActive"
        outlined
        :options="options"
        emit-value
        map-options
        option-value="value"
        option-label="label"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey-7"> 선택하세요. </q-item-section>
          </q-item>
        </template>
      </q-select>
      <!-- <q-input
        v-model="contentModel"
        type="textarea"
        outlined
        placeholder="내용을 작성해주세요~!"
      /> -->
      <TiptapEditor v-model="contentModel" />

      <q-uploader
        class="full-width"
        multiple
        hide-upload-btn
        auto-upload
        :factory="handleFileAdded"
        @rejected="onRejected"
        @removed="handleFileRemoved"
      >
        <template v-slot:list="scope">
          <q-list separator>
            <q-item v-for="file in scope.files" :key="file.__key">
              <q-item-section>
                <q-item-label class="full-width ellipsis">
                  {{ file.name }}
                </q-item-label>

                <q-item-label caption>
                  Status: {{ file.__status }}
                </q-item-label>

                <q-item-label caption>
                  {{ file.__sizeLabel }} / {{ file.__progressLabel }}
                </q-item-label>
              </q-item-section>

              <q-item-section v-if="file.__img" thumbnail class="gt-xs">
                <img :src="file.__img.src" />
              </q-item-section>

              <q-item-section top side>
                <q-btn
                  class="gt-xs"
                  size="12px"
                  flat
                  dense
                  round
                  icon="delete"
                  @click="scope.removeFile(file)"
                />
              </q-item-section>
            </q-item>
          </q-list>
        </template>
      </q-uploader>
    </q-card-section>

    <q-separator />
    <q-card-actions align="right">
      <slot name="actions">
        <q-btn flat label="취소하기" v-close-popup />
        <q-btn type="submit" flat label="저장하기" color="primary" />
      </slot>
    </q-card-actions>
  </q-form>
</template>

<script setup>
import { ref, computed } from 'vue';
import { validateRequired } from 'src/utils/validate-rules';
import TiptapEditor from 'src/components/tiptap/TiptapEditor.vue';
import { uploadFile, removeFile } from 'src/services';
import { useQuasar } from 'quasar';
import { v4 as uuidv4 } from 'uuid';
import axios from 'axios';

const $q = useQuasar();

const uploadId = uuidv4();
console.log(uploadId);
const props = defineProps({
  listTitle: {
    type: String,
  },
  listContent: {
    type: String,
  },
  isActive: {
    type: Boolean,
  },
});

const options = ref([
  { label: '공개', value: true },
  { label: '비밀글', value: false },
]);

const emit = defineEmits([
  'update:listTitle',
  'update:listContent',
  'update:isActive',
  'submit',
]);

const titleModel = computed({
  get: () => props.listTitle,
  set: val => emit('update:listTitle', val),
});
const contentModel = computed({
  get: () => props.listContent,
  set: val => emit('update:listContent', val),
});
const isActive = computed({
  get: () => props.isActive,
  set: val => emit('update:isActive', val),
});

const handleSubmit = () => {
  if (!contentModel.value) {
    $q.notify('내용을 작성하세요.');
    return;
  }
  emit('submit');
};

const onRejected = rejectedEntries => {
  console.log('Rejected files:', rejectedEntries);
  $q.notify({
    type: 'negative',
    message: `${rejectedEntries.length} file(s) were rejected due to size or type constraints`,
  });
};

const files = ref([]); // 업로드된 파일 목록을 담을 배열
const uploadProgress = ref('0%');
const isUploading = ref(false);

const checkFileSize = files => {
  return files.filter(file => file.size < 78000);
};

const updateFileStatus = (file, status, uploadedSize) => {
  console.log(`File ${file.name} status updated to: ${status}`);
  console.log(`Uploaded size: ${uploadedSize}`);

  file.__status = status;
  file.__uploaded = uploadedSize;
  file.__progress = (uploadedSize / file.size) * 100;

  // 여기서 파일 상태를 업데이트하거나 처리할 수 있습니다.
  // 예를 들어 Vuex store에 상태를 업데이트하거나 UI를 업데이트하는 등의 작업을 수행할 수 있습니다.
};

const uploadFile2 = async (file, uploadId, fileKey) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('uploadId', uploadId);
  formData.append('fileKey', fileKey);

  try {
    const response = await axios.post(
      'http://127.0.0.1:8000/api/v1/attachFile/Create',
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${localStorage.getItem('auth/access_token')}`,
        },
        onUploadProgress: function (progressEvent) {
          isUploading.value = true;
          const progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total,
          );
          uploadProgress.value = `${progress}%`;

          // Update file progress
          file.__progress = progress;
          file.__progressLabel = `${progress}%`;
        },
      },
    );

    // Check the server response for success
    console.log('response.status::::::', response.status);
    if (response.status === 200 && response.data) {
      updateFileStatus(file, 'uploaded', file.size); // Set file status to uploaded
    } else {
      updateFileStatus(file, 'failed', 0); // Set file status to failed
    }

    return response.data;
  } catch (error) {
    console.error('Error uploading file:', error);
    updateFileStatus(file, 'failed', 0);
    throw error;
  }
};
const handleFileAdded = async newFiles => {
  for (const file of newFiles) {
    if (file.size >= 78000) {
      // Assuming you have a size limit of 78 KB
      $q.notify('File size must be less than 78 KB');
      continue; // Skip this file
    }
    try {
      const attachFile = await uploadFile2(file, uploadId, file.__key);
      console.log(`File uploaded successfully:`, attachFile);
      files.value.push(file);
    } catch (error) {
      console.error(`Error uploading file ${file.name}:`, error);
    }
  }
};

const handleFileRemoved = async removedFiles => {
  // 파일이 제거될 때 실행되는 함수
  console.log('Removed files:', removedFiles);
  for (const removedFile of removedFiles) {
    try {
      // 서버에서 파일 제거
      const deleted = await removeFile(removedFile.__key, uploadId);
      if (deleted) {
        // 서버에서 파일이 성공적으로 삭제된 경우 로컬 상태에서도 해당 파일 제거
        const index = files.value.findIndex(
          file => file.__key === removedFile.__key,
        );
        if (index !== -1) {
          files.value.splice(index, 1);
        }
        console.log(
          `File ${removedFile.name} removed successfully from server.`,
        );
      } else {
        console.error(`Error removing file ${removedFile.name} from server.`);
      }
    } catch (error) {
      console.error(
        `Error removing file ${removedFile.name} from server:`,
        error,
      );
    }
  }
};
</script>

<style lang="scss" scoped></style>

콘솔 로그 정보 입니다.
의견 부탁 드립니다.
감사합니다.