图片上传（VUE ,element）

一、确定图片上传接口

const UPLOADURL='http://localhost:7001/admin/upload';

根据要求写，这种只是展示，不规范，正常情况下只出现一次端口号，其余均是拼接。

二、页面引入（利用element组件）

<el-form-item prop="sthumb" label="缩略图">
   <el-upload class="avatar-uploader" 
              :action="uploadpath" 
              :show-file-list="false" 
              :on-success="handlerImgUpload">
              <img v-if="editScienceForm.sthumb" :src="imgpath+editScienceForm.sthumb" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

import {UPLOADURL} from "../../api/paths";
export default {
    data(){
      return{
        uploadpath:UPLOADURL,
    }
}

handlerImgUpload(res){
            if(res.code === 200){
                this.editScienceForm.sthumb = res.url;
            }else{
                this.$message.warning(res.msg);
            }
      },

三、处理上传

'use strict';
const fs = require('fs');
const path = require('path');
const moment = require('moment');//处理时间
const sendToWormhole = require('stream-wormhole');
const Controller = require('egg').Controller;

class UploadController extends Controller {
    async create() {
        const { ctx } = this;
        const stream = await ctx.getFileStream();
        let uploadDir = 'app/public/uploads/';
        let date = moment().format('YYYY-MM-DD');
        let dateDir = uploadDir+'/'+date;
        if(!fs.existsSync(dateDir)){
            fs.mkdirSync(dateDir);
        }
        let filename = ""+Date.now() + Math.floor(Math.random()*10000);//给上传一个名字，不能重复，一般都写与时间相关的，在加点密
        let ext = path.extname(stream.filename);
        let picname = filename + ext;
        let movepath = path.join(dateDir,picname);
        let wStream = fs.createWriteStream(movepath);
        try{
            stream.pipe(wStream);
            ctx.body = {
                code:200,
                msg:'',
                url:'/public/uploads/'+date+'/'+picname
            }
        }catch (err) {
            // 必须将上传的文件流消费掉，要不然浏览器响应会卡死
            await sendToWormhole(stream);
            ctx.body={
                code:400,
                msg:"文件上传失败"
            }
            throw err;           
        }      
    }
}

module.exports = UploadController;

//记得处理上传途径，按自己写的来

// 上传照片
require('./router/admin/upload')(app);


module.exports = app => {
    const { router , controller }=app;
    router.resources('/admin/upload',controller.admin.upload)
}

这是简易版的，给大家提供一个参考，希望有所帮助！