vue3.0+TS+egg 前后端实现图片上传功能

深藏阁楼爱情的钟 2023-01-01 07:55 116阅读 0赞

上效果图  
![在这里插入图片描述][20210101105202642.gif_pic_center]  
![在这里插入图片描述][20210101105945170.gif_pic_center]

--------------------

#### upload.vue ####

（样式是boostrap，不必要太在意样式，可以自己写）

<template>
      <div class="file-upload">
        <div class="file-upload-container" @click.prevent="triggerUpload">
          <slot v-if="fileStatus === 'loading'" name="loading">
            <button class="btn btn-primary" disabled>正在上传...</button>
          </slot>
          <slot v-else-if="fileStatus === 'success'" name="uploaded">
            <button class="btn btn-primary">上传成功</button>
          </slot>
          <slot v-else name="default">
            <button class="btn btn-primary">点击上传</button>
          </slot>
        </div>
        <input
          type="file"
          class="file-input d-none"
          ref="fileInput"
          @change="handleFileChange"
        >
      </div>
    </template>
    <script lang="ts">
    import axios from 'axios';
    import {  defineComponent, ref } from "vue";
    type UploadStatus = 'ready' | 'loading' | 'success' | 'error'
    export default defineComponent({ 
      props: { 
        action: { 
          type: String,
          required: true
        }
      },
      setup(props) { 
        const fileInput = ref<null | HTMLInputElement>(null)
        const fileStatus = ref<UploadStatus>('ready')
        const triggerUpload = () => { 
          if (fileInput.value) { 
            fileInput.value.click()
          }
        }
        const handleFileChange = (e: Event) => { 
          const currentTarget = e.target as HTMLInputElement
          if (currentTarget.files) { 
            fileStatus.value = 'loading'
            const files = Array.from(currentTarget.files)
            const formData =  new FormData()
            formData.append('file', files[0])
            axios.post(props.action, formData, { 
              headers: { 
                'Content-Type': 'multipart/form-data'
              }
            }).then(res => { 
              console.log(res)
              fileStatus.value = 'success'
            }).catch(() => { 
              fileStatus.value = 'error'
            }).finally(() => { 
              if (fileInput.value) { 
                fileInput.value.value = ''
              }
            })
          }
        }
        return { 
          fileInput,
          triggerUpload,
          handleFileChange
        }
      }
    })
    </script>

使用组件的时候，传入相对应的后端接口，即可

--------------------

### egg ###

public 下，新建一个 comfiles 文件夹  
router.js

router.post('/upload', controller.upload.uploadFiles);

app/controller/upload.js

'use strict';
    
    const Controller = require('egg').Controller;
    
    class UploadController extends Controller { 
      async uploadFiles() { 
        const {  ctx } = this;
        const data = await ctx.service.upload.index();
        if (data) { 
          ctx.body = data;
        } else { 
          ctx.body = { 
            message: '上传失败',
          };
        }
      }
    }
    
    module.exports = UploadController;

app/service/upload.js

'use strict';
    const Service = require('egg').Service;
    const fs = require('fs');
    const path = require('path');
    const sendToWormhole = require('stream-wormhole');
    
    
    class UploadService extends Service { 
      async index() { 
        const ctx = this.ctx;
        const stream = await ctx.getFileStream();
        const fileName = stream.filename;
    
        const target = path.join(this.config.baseDir, `app/public/comfiles/${ stream.filename}`);
        const result = await new Promise((resolve, reject) => { 
          const remoteFileStream = fs.createWriteStream(target);
          stream.pipe(remoteFileStream);
          let errFlag;
          remoteFileStream.on('error', err => { 
            errFlag = true;
            sendToWormhole(stream);
            remoteFileStream.destroy();
            reject(err);
          });
    
          remoteFileStream.on('finish', async () => { 
            if (errFlag) return;
            resolve({  fileName, name: stream.fields.name });
          });
        });
        return result;
      }
    }
    
    module.exports = UploadService;

参考文章：https://www.cnblogs.com/qq735675958/p/9315694.html

[20210101105202642.gif_pic_center]: /images/20221120/7db6cd13177546d5ad9059d565f3ade8.png
[20210101105945170.gif_pic_center]: https://img-blog.csdnimg.cn/20210101105945170.gif#pic_center