el-upload ref=uploadRef v-modelfile-list=fileList list-type=picture-card on-preview=handlePictureCardPreview on-remove=handleRemove auto-upload=false el-icon Plus

在前端vue中，可以通过以下方式实现图片上传：

1. 安装axios和qs模块：npm install axios qs --save

2. 在组件中定义上传方法：

   methods: {
     handleUpload() {
       const formData = new FormData();
       this.fileList.forEach(file => {
         formData.append('file', file.raw);
       });
       axios.post('/api/upload', formData).then(res => {
         console.log(res.data);
       });
     },
     handleRemove(file, fileList) {
       console.log(file, fileList);
     },
     handlePreview(file) {
       console.log(file);
     }
   }
   

3. 在模板中使用el-upload组件并绑定上传方法：

   <el-upload
     ref="upload"
     action="/api/upload"
     :before-upload="() => false"
     :on-remove="handleRemove"
     :on-preview="handlePreview"
     :auto-upload="false"
   >
     <i class="el-icon-plus"></i>
   </el-upload>
   <el-button class="upload-btn" type="primary" @click="handleUpload">上传</el-button>
   

在后端eggjs中，可以通过以下方式实现图片上传：

1. 安装egg-multipart模块：npm install egg-multipart --save

2. 在config/config.default.js中配置：

   exports.multipart = {
     mode: 'file',
     whitelist: ['.jpg', '.jpeg', '.png', '.gif', '.bmp']
   };
   

3. 在controller中定义上传方法：

   async upload() {
     const { ctx } = this;
     const files = await ctx.multipart();
     const file = files[0];
     const result = await ctx.service.upload.upload(file);
     ctx.body = result;
   }
   

4. 在service中定义上传逻辑：

   async upload(file) {
     const { ctx, app } = this;
     const filename = file.filename.toLowerCase();
     const target = path.join(app.config.static.dir, filename);
     const src = fs.createReadStream(file.filepath);
     const dest = fs.createWriteStream(target);
     await pump(src, dest);
     return {
       url: `${ctx.protocol}://${ctx.host}/public/${filename}`
     };
   }
   

完整代码参考如下：

前端vue：

<template>
  <div>
    <el-upload
      ref="upload"
      action="/api/upload"
      :before-upload="() => false"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :auto-upload="false"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-button class="upload-btn" type="primary" @click="handleUpload">上传</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleUpload() {
      const formData = new FormData();
      this.fileList.forEach(file => {
        formData.append('file', file.raw);
      });
      axios.post('/api/upload', formData).then(res => {
        console.log(res.data);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

后端eggjs：

const path = require('path');
const fs = require('fs');
const pump = require('mz-modules/pump');

const Controller = require('egg').Controller;

class UploadController extends Controller {
  async upload() {
    const { ctx } = this;
    const files = await ctx.multipart();
    const file = files[0];
    const result = await ctx.service.upload.upload(file);
    ctx.body = result;
  }
}

module.exports = UploadController;

const path = require('path');
const fs = require('fs');
const pump = require('mz-modules/pump');

const Service = require('egg').Service;

class UploadService extends Service {
  async upload(file) {
    const { ctx, app } = this;
    const filename = file.filename.toLowerCase();
    const target = path.join(app.config.static.dir, filename);
    const src = fs.createReadStream(file.filepath);
    const dest = fs.createWriteStream(target);
    await pump(src, dest);
    return {
      url: `${ctx.protocol}://${ctx.host}/public/${filename}`
    };
  }
}

module.exports = UploadService;
``