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;