egg.js ajax上传文件,egg.js 后端+ jquery前端 跨域 文件上传

jquery前端

contentType: false,

processData: false,

// input file改变事件，这里使用vue的写法

handleFileChange (e) {

let formData = new FormData()

formData.append('files', e.target.files[0])

// console.log(e.target.files)

window.$.ajax({

type: 'POST',

url: 'http://localhost:7001/admin/upload',

data: formData,

// 不要设置Content-Type请求头，

// 自动会动设置成 'multipart/form-data', 不要手动设置

contentType: false,

processData: false, // 告诉jQuery不要去处理发送的数据

timeout: 5000,

success: function(res) {

console.log(res)

},

error: function(err) {

console.log(err)

}

})

}

egg.js 后端

// 处理跨域问题

npm i egg-cors --save

// 处理跨域问题

// puglin.js

'use strict';

/** @type Egg.EggPlugin */

module.exports = {

// had enabled by egg

// static: {

// enable: true,

// }

cors: {

enable: true,

package: 'egg-cors',

}

};

// config.default.js

// 上传文件的配置

// https://github.com/eggjs/egg-multipart

config.multipart = {

// 只允许上传的图片格式

whitelist:['.png','.jpg','.jpeg', '.gif', '.mp3', '.mp4'],

// 文件允许大小

fileSize: '50mb',

}

config.security = {

domainWhiteList: ['http://localhost:8080'],

methodnoallow: {

enable: false,

},

xframe: {

enable: false,

},

csrf: {

enable: false,

headerName: 'x-csrf-token',

ignoreJSON: false,

},

}

// 匹配规则 域名+端口 *则为全匹配

// domainWhiteList如果是多个，origin可以删除，cors插件会设置请求的域名为跨域域名.

config.cors = {

origin: 'http://localhost:8080',

allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',

credentials: true

};

// upload.js

'use strict';

// 返回 { code: '000', data: null, msg: '请求成功'} 这个格式的数据

let tools = require('../utils/tools.js')

//node.js 文件操作对象

const fs = require('fs');

//node.js 路径操作对象

const path = require('path');

const sendToWormhole = require('stream-wormhole');

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

class UploadController extends Controller {

async upload() {

const ctx = this.ctx;

const parts = ctx.multipart();

let part;

let res = null

let fileUrlArr = []

let tempFileUrl

// console.log(res)

// parts() 返回 promise 对象

while ((part = await parts()) != null) {

// console.log(part)

if (part.length) {

// 这是 busboy 的字段

// console.log('field: ' + part[0]);

// console.log('value: ' + part[1]);

// console.log('valueTruncated: ' + part[2]);

// console.log('fieldnameTruncated: ' + part[3]);

// 应该给每一个文件都取一个name

res = tools.getResp('000100', null, '文件列表参数错误')

} else {

if (!part.filename) {

// 这时是用户没有选择文件就点击了上传(part 是 file stream，但是 part.filename 为空)

// 需要做出处理，例如给出错误提示消息

return;

}

// part 是上传的文件流

// console.log('field: ' + part.fieldname);

// console.log('filename: ' + part.filename);

// console.log('encoding: ' + part.encoding);

// console.log('mime: ' + part.mime);

// 文件处理，上传到云存储等等

let result;

let date = new Date()

let m = date.getMonth() + 1

let pUrl = '/md-editor/public/html-page/images/upload/' + date.getFullYear() + (m > 9 ? m : ('0' + m)) + '/'

pUrl = path.join(path.resolve("."), pUrl + part.filename)

console.log('文件路径：', pUrl)

try {

// result = await ctx.oss.put(pUrl + part.filename, part);

result = fs.createWriteStream(pUrl)

await part.pipe(result)

tempFileUrl = pUrl.split('public')

fileUrlArr.push({

url: tempFileUrl[1]

})

res = tools.getResp('000000', fileUrlArr)

} catch (err) {

// 必须将上传的文件流消费掉，要不然浏览器响应会卡死

await sendToWormhole(part);

console.log(err)

res = tools.getResp('000200', null)

}

// console.log(result);

}

}

console.log('and we are done parsing the form!', res);

ctx.body = res

}

}

module.exports = UploadController;