Do your own node background management project to meet the image uploading function in the editor, online search resources found incomplete, share after fix

First paste the correct front-end and back-end code and then explain the use of bugs encountered

Front-end code my picture upload is the editor, but for other uploads can be

The editor file uses the Makdown editor in Vue

<template>
    <mavon-editor ref=md v-model="editor.content" @imgAdd="$imgAdd" ></mavon-editor>
</template>
<script>
$imgAdd (pos, file) {
      var that = this
      var formdata = new FormData()
      console.log(pos)
      console.log(file)
      formdata.append('imgFile', file)
      console.log(formdata)
      console.log(formdata.getAll('imgFile'))
      var postData = {
        formdata: formdata
      }
      that.$axios('post'.'/upload', formdata).then(res => {
        console.log(res.url)
        that.$refs.md.$img2Url(pos, res.url)
      })
    }
</style>
Copy the code

The AXIos file is mainly configured

axios.defaults.headers.post['Content-Type'] = false// Encapsulate the POST requestfunction post (url, params) {
  returnNew Promise((resolve, reject) => {// qs.stringify(params) params) .then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) }export default function request (method, url, params) {
  if (method === 'get') {
    return get(url, params)
  } else if (method === 'post') {
    return post(url, params)
  }
}
Copy the code

Describe front-end bugs

The first step is to set of headers axios. Defaults. Headers. Post ['Content-Type'] = false; Initially set is axios. Defaults. Headers. Post ['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; But if you look at the document when you upload it, you want to set headers: {'Content-Type': 'multipart/form-data'}, The node reported no multipart boundary was found because normal multipart/form-data would be followed by a boundary during the request, but my request did not have one So according to me the headers set to axios. Defaults. Headers. Post ['Content-Type'] = false; The second error is that FormData does not display the output of formData in the POST request if formdata.getall () console.log(formData.getall ())'imgFile'My axios post uses qs.stringify () to serialize the object to a URL, but I don't need to upload the file so I use params axios.post(URL, params)Copy the code

Bugs encountered on the Node backend

Step 1 cross domain error My code is separated from the front and back and not used in a project so cross domain the way I used to cross domain was to set up cross-domain access to app.all(The '*'.function(req, res, next) {
    res.header("Access-Control-Allow-Origin"."*");
    res.header("Access-Control-Allow-Headers"."X-Requested-With");
    res.header("Access-Control-Allow-Methods"."PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By".'3.2.1')
    res.header("Content-Type"."application/json; charset=utf-8"); next(); }); But because of the front-end axios. Defaults. Headers. Post ['Content-Type'] = false; CNPM install cors --save const cors = require('cors'Unexpected field upload.single(app.use(cors()))'imgFile'The Field name parameter in single is the file name specified by the form. When we upload a file using input, the name in the input must be the same as the parameter in single. When we upload an image using mavon-editor, the name must be the same formdata.append('imgFile'Const storage = multer.diskStorage({destination:) const storage = multer.diskStorage({destination:) const storage = multer.diskStorage({destination:) const storage = multer.diskStorage({destination:) const storage = multer.diskStorage({destination:)function(req, file, cb) { cb(null, uploadFolder); // Save path, note: need to create}, filename:function(req, file, cb) {// Set the save filename to cb(null, date.now ()+The '-'+ file.originalname ); }}); So this is the encapsulated function and the important thing to note is that when I set the file field name I use file. originalName and I started with file.filename and the result is a binary file and not an image and you can use filename to concatenate the file type Get request app.get(originalName)'/public/uploads/*'.function (req, res) {
    res.sendFile( __dirname + "/" + req.url );
    console.log("Request for " + req.url + " received.");
})
Copy the code

Reference link: Multer github.com/expressjs/m…

Reference link: mavonEditor github.com/hinesboy/ma…