problem description
the front end uses the upload component of ant to upload images, the back end uses the service built by koa2 framework, and the front end uses nigix reverse proxy port 8000 to port 3001. Other get,post requests are normal.
the request request status returned after using the upload component is 200, but the backend does not successfully generate the picture.
< hr >upload component method
<Upload
name="file"
action="http://localhost:8000/api/goods/imgUpload"
accept="image/*"
data={(file)=>{this.upload(file)}}
withCredentials
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
>
{fileList.length >= 10 ? null : uploadButton}
</Upload>Requset Header format is as follows
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 814
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryZvGXdj5g8yvDOCFD
Cookie: USER_SID=qIk6gw9xjGBH4dnZSiID6ay4H7fMzyzA
Host: localhost:8000
Origin: http://localhost:8000
Referer: http://localhost:8000/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
X-Requested-With: XMLHttpRequestRequset payload format is as follows
------WebKitFormBoundaryZvGXdj5g8yvDOCFD
Content-Disposition: form-data; name="file"; filename="jiekuan_beika.png"
Content-Type: image/png
------WebKitFormBoundaryZvGXdj5g8yvDOCFD--koa2 app.js file is as follows
require("babel-register");
require("babel-polyfill");
const path = require("path")
const Koa = require("koa")
const convert = require("koa-convert")
const views = require("koa-views")
const koaStatic = require("koa-static")
const bodyParser = require("koa-bodyparser")
const koaLogger = require("koa-logger")
const session = require("koa-session-minimal")
const MysqlStore = require("koa-mysql-session")
const json = require("koa-json")
const koaBody = require("koa-body");
const errorHandle = require("./controllers/error-catch")
const config = require("./../config")
const routers = require("./routers/index")
const app = new Koa()
// session
const sessionMysqlConfig = {
user: config.database.USERNAME,
password: config.database.PASSWORD,
database: config.database.DATABASE,
host: config.database.HOST,
}
//
app.use(errorHandle())
// session
const THIRTY_MINTUES = 30 * 60 * 1000;
const staticPath = "static";
app.use(session({
key: "USER_SID",
store: new MysqlStore(sessionMysqlConfig),
cookie: {
maxAge: THIRTY_MINTUES,
overwrite: false,
rolling: true, //apisession fale
renew: false,
}
}))
app.use(koaStatic(
path.join( __dirname, staticPath)
))
//
app.use(koaLogger())
// ctx.body
app.use(bodyParser(
{
enableTypes: ["json", "form", "text"]
}
))
//json
app.use(json())
//
app.use(routers.routes()).use(routers.allowedMethods())
//
app.listen(config.port)
console.log(`the server is start at port ${config.port}`)the format of the background receiving interface is as follows
router.post("/goods/imgUpload",goodsController.imgUpload )imgUpload method
async imgUpload(ctx, next) {
let result = new WebResult(ctx.request);
let response = await uploadFile(ctx);
if(response.success){
result.set(1,"")
}
ctx.body = response
}uploadFile method
const inspect = require("util").inspect
const path = require("path")
const os = require("os")
const fs = require("fs")
const UtilType = require("./type")
const UtilDatetime = require("./datetime")
const Busboy = require("busboy")
import Appconfig from "../appConfig"
/**
*
* @param {string} dirname
* @return {boolean}
*/
function mkdirsSync(dirname) {
if (fs.existsSync(dirname)) {
return true
} else {
if (mkdirsSync(path.dirname(dirname))) {
fs.mkdirSync(dirname)
return true
}
}
}
/**
*
* @param {string} fileName
* @return {string}
*/
function getSuffixName(fileName) {
let nameList = fileName.split(".")
return nameList[nameList.length - 1]
}
/**
*
* @param {object} ctx koa
* @param {object} options fileType path
* @return {promise}
*/
function uploadFile(ctx) {
let req = ctx.req
let res = ctx.res
//
if (!/multipart\/form-data/i.test(req.headers["content-type"])) {
return
}
let busboy = new Busboy({headers: req.headers})
//
let fileType = "upload"
//
let filePath = path.join(
__dirname,
"/../static/",
fileType,
UtilDatetime.parseStampToFormat(null, "YYYY/MM/DD")
)
let mkdirResult = mkdirsSync(filePath)
console.log("...")
return new Promise((resolve, reject) => {
let result = {
code: -1,
success: false,
message: "",
data: null,
}
console.log(busboy)
//
busboy.on("file", function (fieldname, file, filename, encoding, mimetype) {
console.log("...")
let fileName = Math.random().toString(16).substr(2) + "." + getSuffixName(filename)
let _uploadFilePath = path.join(filePath, fileName)
let saveTo = path.join(_uploadFilePath)
//
file.pipe(fs.createWriteStream(saveTo))
//
file.on("end", function () {
result.success = true
result.message = ""
result.data = {
pictureUrl: `//${ctx.host}/upload/${fileType}/${fileName}`
}
console.log("")
resolve(result)
})
})
//
busboy.on("field", function (fieldname, val, fieldnameTruncated, valTruncated, encoding, mimetype) {
console.log(" [" + fieldname + "]: value: " + inspect(val));
result.data[fieldname] = inspect(val);
});
//
busboy.on("finish", function () {
console.log("")
result.message = ""
resolve(result)
})
//
busboy.on("error", function (err) {
console.log("")
reject(result)
})
//busboy
req.pipe(busboy);
})
}
module.exports = {
uploadFile
}browsing the official busboy documents and github found that the uploadFile method is consistent with the official, but in the actual operation, only the busboy.on ("finish") method will be triggered, indicating that the file has been uploaded, but the busboy.on (" file") method will not be triggered, that is, the selected file has not actually been uploaded to the local server. After several days of study, I still have no clue. I hope someone can help me. Thank you.