webpack打包源代码配置

<template>
  <el-image :src="imageUrl" />
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'ImageWithCacheAndAuth',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const imageUrl = ref('');

    const loadImage = async () => {
      try {
        const response = await axios.get(props.src, {
          responseType: 'blob',
          headers: {
            Authorization: `Bearer ${yourToken}`
          }
        });
        const blobUrl = URL.createObjectURL(response.data);
        imageUrl.value = blobUrl;
      } catch (error) {
        console.error('Failed to load image', error);
      }
    };

    // 在组件挂载时，加载图片
    loadImage();

    return {
      imageUrl
    };
  }
};
</script>

<template>
  <div>
    <image-with-cache-and-auth src="https://your-image-url.com/image.jpg" />
  </div>
</template>

<script>
import ImageWithCacheAndAuth from './components/ImageWithCacheAndAuth.vue';

export default {
  components: {
    ImageWithCacheAndAuth
  }
};
</script>

<template>
  <el-upload
    ref="upload"
    :auto-upload="false"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button @click="startUpload" size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';

const uploadRef = ref(null);

// 开始上传
const startUpload = () => {
  // 调用上传函数
  upload();
};

// 自定义上传函数
const upload = () => {
  const file = uploadRef.value.file;
  // 模拟上传，此处可以替换为实际的上传逻辑
  setTimeout(() => {
    const success = Math.random() < 0.5; // 模拟上传成功或失败
    if (success) {
      handleSuccess({ success: true }, file);
    } else {
      handleError({ message: 'Upload failed' }, file);
    }
  }, 1000);
};

// 上传成功回调
const handleSuccess = (response, file) => {
  // 处理上传成功的逻辑
  console.log('Upload success:', response, file);
};

// 上传失败回调
const handleError = (error, file) => {
  // 处理上传失败的逻辑
  console.error('Upload error:', error, file);
};
</script>

<template>
  <el-upload
    ref="upload"
    :auto-upload="false"
    :limit="1"
    :file-list="fileList"
    :on-change="handleFileChange"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const uploadRef = ref(null);
const fileList = ref([]);

const handleFileChange = (file, fileList) => {
  if (fileList.length > 0) {
    upload(fileList[0].raw);
  }
};

const upload = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/your/upload/url', formData)
    .then(response => {
      handleSuccess(response.data, file);
    })
    .catch(error => {
      handleError(error, file);
    });
};

const handleSuccess = (response, file) => {
  console.log('Upload success:', response, file);
  fileList.value = []; // 清空文件列表，确保每次只能上传一个文件
};

const handleError = (error, file) => {
  console.error('Upload error:', error, file);
  // 可以在这里处理上传失败后的逻辑
};
</script>

<template>
  <div>
    <ChildComponent @upload-success="handleUploadSuccess" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const handleUploadSuccess = (response) => {
  console.log('Parent received upload success:', response);
  // 可以在这里处理上传成功后的逻辑
};
</script>

<template>
  <el-upload
    ref="upload"
    :auto-upload="false"
    :file-list="fileList"
    :limit="uploadLimit"
    :on-change="handleFileChange"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const uploadRef = ref(null);
const fileList = ref([]);
const uploadLimit = ref(1); // 每次只上传一个文件，可以调整数量

const handleFileChange = (file, fileList) => {
  if (fileList.length > uploadLimit.value) {
    fileList.splice(0, fileList.length - uploadLimit.value);
  }
  upload(file.raw);
};

const upload = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/your/upload/url', formData)
    .then(response => {
      handleSuccess(response.data, file);
    })
    .catch(error => {
      handleError(error, file);
    });
};

const handleSuccess = (response, file) => {
  console.log('Upload success:', response, file);
  // 在这里可以执行上传成功后的逻辑，例如通知父组件
  emit('upload-success', response);
};

const handleError = (error, file) => {
  console.error('Upload error:', error, file);
  // 在这里可以执行上传失败后的逻辑，例如提示用户重新上传等
};
</script>