Vue + multer Uploading images

Vuejs (Element-ui) + Express (multer) upload file

1.NPM Install Multer--save

2. Create a new Vue file

Main code:

         <form method= "POST"  enctype= "Multipart/form-data"  class= " Form-horizontal "  @submit prevent=" Submit " ref=" Inputupload ">             <input type= "File"  name= "resourcename"  accept= "audio/ Mpeg,image/png,image/jpeg " style=" display:inline-block;width:250px; "               v-on:change= "GetFileInfo"  />            <div slot= "Tip"  class= "El-upload_tip" >Only .mp3, .png and .jpg file can be  uploaded and size limit is 10mb.</div>             <el-button native-type= "Submit"  class= "El-icon-upload" &NBSP;: Disabled= "!formatfile" &GT;UPLOAD&LT;/EL-BUTTON&GT;&NBSP;&NBSP;&Nbsp;       </form>    getFileInfo: function  ( Event)  {        if  (event.target.files &&  Event.target.files.length)  {          this.upFile  = event.target.files[0];//main read file display some information//....submit: function  (event)  {         var self = this;         Var fd = new formdata (Event.target);         fetch ( '/uploadresource ', {          method:  ' POST ',           body: fd,           credentials:  "include" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;}). Then ( Response => {//....})           } 3. The URL inside the  fetch (the read file is stored under the specified directory)  var fs = require (' FS ') var multer =  Require (' Multer ') var path =  "./public/static/upload";
if (!fs.existssync (path)) {//Fs.mkdirsync (PATH)//}
var storage = Multer.diskstorage ({destination:function (req, res, CB) {CB (NULL, PATH); }, Filename:function (req, file, CB) {CB (NULL, File.originalname)})
var upload = Multer ({storage:storage, limits: {fieldnamesize: ' 10M '}})

exports.singleupload = function  (req, res)  {    s =  Uploadresource.single (' imgupload ');     s (req, res, function  (ERR)  {         if  (ERR)  {             res.send ({                  ' status ':  ' failed '              })         } else {             res.send ({                  ' status ':  ' OK '              })         }    })}  4. API added to Routerrouter.poSt ('/getfile ', upload.singleupload)   Other additions: If Excel is replaced with     accept= "application/vnd.ms-excel, Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "     API parsing in the use of  var  xlsx = require (' xlsx ');//self-understanding               

Vue + multer uploading pictures