vue3封装上传图片hooks

你可以尝试使用 Vue 3 Composition API 来封装一个上传图片的自定义 hooks。下面是一个简单的示例：

import { ref } from 'vue';

export function useImageUploader() {
  const file = ref(null);
  const imageUrl = ref(null);
  
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    file.value = selectedFile;
    
    // 可以根据需要进行图片预览操作
    const reader = new FileReader();
    reader.onload = () => {
      imageUrl.value = reader.result;
    };
    reader.readAsDataURL(selectedFile);
  };
  
  const uploadImage = () => {
    // 在这里执行图片上传的逻辑，可以使用 axios 或其他库发送请求
    // 你可以将 file.value 作为上传的参数
    // 注意处理上传成功或失败的回调函数
    // 这里只是一个示例，你可以根据实际需求进行适当修改
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟上传成功
        resolve('上传成功');
        
        // 模拟上传失败
        // reject('上传失败');
      }, 2000);
    });
  };
  
  return {
    file,
    imageUrl,
    handleFileChange,
    uploadImage,
  };
}

在你的组件中使用这个自定义 hooks，示例如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img v-if="imageUrl" :src="imageUrl" alt="Preview">
    <button @click="uploadImage">上传</button>
  </div>
</template>

<script>
import { useImageUploader } from './useImageUploader';

export default {
  setup() {
    const { file, imageUrl, handleFileChange, uploadImage } = useImageUploader();
    
    return {
      file,
      imageUrl,
      handleFileChange,
      uploadImage,
    };
  },
};
</script>

这个示例中，我们使用 `useImageUploader` 自定义 hooks 来封装上传图片的逻辑。你可以通过 `file` 来获取选择的文件对象，通过 `imageUrl` 来预览选择的图片。`handleFileChange` 方法用于处理文件选择变化事件。`uploadImage` 方法用于执行图片上传逻辑。

当你在组件中使用这个 hooks 时，你可以通过 `file` 和 `imageUrl` 来渲染界面，通过 `handleFileChange` 来响应文件选择事件，通过 `uploadImage` 来触发上传操作。

请注意，这只是一个简单示例，你可以根据实际需求进行适当修改和扩展。