The image upload component introduced to elementUI was briefly introduced in the fourth article of this series, but without going into detail, this article will show you how to upload images in detail.

1 Back-end part

  • Creating an Upload Route

    app.post('/admin/api/upload'.async(req,res)=>{
     const file=req.file
     res.send(file)
  })
Copy the code

  • Creating middleware

    Multer helper middleware needs to be installed in the server first: NPM I multer, and then multer is introduced

    const multer=require('multer')
const upload =multer({dest:__dirname + '/.. /.. /uploads'})  // Destination address
Copy the code

    Join the middleware:

    app.post('/admin/api/upload',upload.single('file'),async(req,res)=>{
      const file=req.file
      file.url=`http://localhost:3000/uploads/${file.filename}`// Display the image through the url of the file
      res.send(file)
    })
Copy the code

  • Make uploaded files visible to the front end, using static file hosting

    app.use('/uploads', express.static(__dirname + '/uploads'))
Copy the code

2 Front End

Upload picture component:

<el-form-item label="Icon" >
           <el-upload
               class="avatar-uploader"
               :action="uploadUrl"/** Dynamic request address **/:show-file-list="false"
               :on-success="afterUpload"/** Call **/> 
                <img v-if="model.icon" :src="model.icon" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
 </el-form-item>
Copy the code

$http.defaults.baseURL+’/upload’. This address can be defined globally:

 /**main.js**/
uploadUrl(){
      return this.$http.defaults.baseURL+'/upload'
    }
Copy the code

V-if v-else displays the image address if it is returned, and displays the default arrow if it is not

<img v-if="model.icon" :src="model.icon" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
Copy the code

:on-success Indicates that the function is called after successful execution, and the image address value returned by the server is displayed and assigned to model.icon. The image is displayed through the URL of the image

 afterUpload(res){
            this.$set(this.model,'icon',res.url)    // Explicitly assign
 }
Copy the code

Rich text editor for picture uploading

Directly copying the content of the article and uploading the image through the rich text editor will cause the image resource to be embedded in the whole request data, resulting in a large amount of data and very slow loading interface speed. So in order to solve this problem, we modified the front part to upload the image by clicking the image button of the rich text editor.

  • Look for the official documentation and find the section about Upload.

  • Add an image upload method to vue-Editor component

    <vue-editor v-model="model.body" useCustomImageHandler 
                 @image-added="handleImageAdded">
</vue-editor>
Copy the code

  • Modify method writing to await synchronous writing, also reduce the amount of code

    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
             const formData = new FormData();  // Form data object
             formData.append("file", file);    // The image is in file format
             const res= await this.$http.post('upload',formData);
             // Insert the image resource address to the cursor position with the element name image
             Editor.insertEmbed(cursorLocation, "image", res.data.url);
             resetUploader();
    }
Copy the code