- A+
所属分类：Web前端
egg-multipart有两种模式：file和stream
el-upload参数传递有两种方式：利用自带参数data和手动添加参数
一、file 模式下的带参传递
1、egg配置
// config.default.js exports.multipart = { mode: 'file', allowArrayField: true, fileSize: '5mb', }; 2、前端配置
<el-upload :action="url" :data="uploadData" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-remove="handleBeforeRemove" :on-success="uploadSuccess" :before-upload="beforeUpload" :on-change="changeUpload" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > 其中，uploadData为Object
uploadData: { test: '111111111' },
3、egg后台
// app/controller/upload.js const Controller = require('egg').Controller; const fs = require('mz/fs'); const path = require('path'); const oss = require('ali-oss'); const crypto = require('crypto'); module.exports = class extends Controller { async upload() { const { ctx } = this; const file = ctx.request.files[0]; // 获取传递的参数 console.log(ctx.request.body); // 配置阿里云oss const client = new oss({ accessKeyId: this.config.aliyun.accessKeyId, accessKeySecret: this.config.aliyun.secretAccessKey, bucket: 'xxxx', region: 'xxx', }); // 获取后缀 const extname = path.extname(file.filename) .toLocaleLowerCase(); // 生成唯一的文件名 const md5 = crypto.createHash('md5'); const timestamp = (new Date()).getTime(); // 当前时间戳 const randomNum = Math.ceil(Math.random() * 1000); // 取1000以下的随机数 const filename = md5.update(path.basename(file.filename, extname) + timestamp + randomNum) .digest('hex') + extname; try { // 处理文件，比如上传到云端 const result = await client.putStream(filename, file.filepath); ctx.body = { code: 200, result }; } catch(e){ // 需要删除临时文件 await fs.unlink(file.filepath); ctx.body = { code: 110, msg:e }; } } }; 二、stream 模式
1、egg配置
// config.default.js exports.multipart = { mode: 'stream', allowArrayField: true, fileSize: '5mb', }; 2、前端配置不变
3、egg
const path = require('path'); const sendToWormhole = require('stream-wormhole'); const Controller = require('egg').Controller; class UploaderController extends Controller { async upload() { const ctx = this.ctx; const stream = await ctx.getFileStream(); // 获取参数 console.log(stream.fields); if (!stream.filename) { ctx.body = { code: 110, msg: '上传失败，请重新尝试', }; return; } // 配置阿里云oss const client = new oss({ accessKeyId: this.config.aliyun.accessKeyId, accessKeySecret: this.config.aliyun.secretAccessKey, bucket: 'xxxx', region: 'xxx', }); // 获取后缀 const extname = path.extname(file.filename) .toLocaleLowerCase(); // 生成唯一的文件名 const md5 = crypto.createHash('md5'); const timestamp = (new Date()).getTime(); // 当前时间戳 const randomNum = Math.ceil(Math.random() * 1000); // 取1000以下的随机数 const filename = md5.update(path.basename(file.filename, extname) + timestamp + randomNum) .digest('hex') + extname; try { const result = await client.putStream(filename, stream); ctx.body = { code: 200, result, }; } catch (err) { console.log(err); await sendToWormhole(stream); ctx.body = { code: 110, msg: '上传失败', }; } ctx.body = { url: result.url, // 所有表单字段都能通过 `stream.fields` 获取到 fields: stream.fields, }; } } module.exports = UploaderController; 三、手动传参
如果不通过el-upload的data进行传参，可以手动传参，但是手动传参需要注意一下几点：
1、header设置为formdata格式
headers: { 'Content-Type': 'multipart/form-data' } axios封装后的请求为：
export function upload(data) { return request({ url: '你的路径', method: 'post', Headers: { 'Content-Type': 'multipart/form-data' }, data }) } 2、formdata添加参数方式：
const fileFormData = new FormData() fileFormData.append('id', '111111111') fileFormData.append('file', this.file_name) 其中，file_name为：file的raw
changeUpload(file) { console.log(file) this.file_name = file.raw }, 欢迎关注，共同交流前端知识~
