File operations such as uploading images using axios in vue project

Introduction to axios

axios is an HTTP client based on Promise for browsers and nodejs, which itself has the following characteristics:

Create XMLHttpRequest from the browser

Make an http request from

Support Promise API

Intercept requests and responses

Convert request and response data

Cancel request

Automatically convert JSON data

Client support to prevent CSRF/XSRF

First install axios:

1. Use npm to install npm install axios –save

2. Use bower to install bower install axios –save

3. Directly use cdn to introduce

<script src="/axios/dist/"></script>

Generally, there are two ways to upload photos:

1. Convert the local image to base64 and then send it to the server through a normal post request.

Simple operation, suitable for small pictures, and if you want to be compatible with lower versions of ie, you can't use this method

2. Submit through form.

The form form submission image will refresh the page, or it can be bound to a hidden iframe when the form is bound to a refresh-free submission data.

Here I will only explain the second method:

html code:

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js code:

import axios from 'axios'
// Add request headerupdate (e) {  // Upload photos   var self = this
   let file = [0]
   /* eslint-disable no-undef */
   let param = new FormData() // Create form object   ('file', file, ) // Add data to form object through append   ('chunk', '0') // Add other data in the form form   (('file')) // FormData private class object cannot be accessed, you can use get to determine whether the value is transmitted in   let config = {
    headers: {'Content-Type': 'multipart/form-data'}
   }
   // Add request header  ('http://172.19.26.60:8081/rest/user/headurl', param, config)
    .then(response =&gt; {
     if ( === 0) {
       = 
     }
     ()
    })
  }

Summarize

The above is the files such as uploading pictures in the vue project introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!