Boy, self-study separation development step in a pit before and after the end, after complete fill in front end, when really tied into the development process of modern front end, only to find that now the front end of the programmer high salary that is should, after before, we only remember all dry front end, write a HTML front end is cut a figure, even don’t write, interaction is just give the back-end static pages, Backend to deal with again, this is where the PHP language prevails over the years in the field of web important reasons, fast, cost savings, a back-end completely dry, the whole package, not nowadays, primary backend PHP has opened, the front end is better than to eat even say so many, still want to say now the front end of the can’t again despise the, some difficult, also some people!

Remember a front-end Axios + Vue image upload pit

Write a upload pictures of backend interface is very simple, only need to let this field is restricted to image format, logic is just a matter of background do a save, the front-end processing will be involved in the request header, the processing of data format and so on questions, according to the old tradition to put picture according to the string to the interface found back all 400 error, Until I knew the FormData method on the front end!

What the hell is FormData?

After a lot of searching, it turns out that this amazing object is an addition to XMLHttpRequest Level 2, which was introduced in February 2008, and you can use it to submit forms, simulate form submission, and of course upload binaries. You can submit the name and value of all form elements into a queryString.

Highlight: You can submit the name and value of all form elements into a queryString. This is not the back end of the so-called conversion of data format, according to the format of bai, before and after the end of the separation is certainly asynchronous submission, this can be a good solution to the problem!

It’s also very easy to use soeasy just pass the form form as a parameter to the FormData constructor!

Play with Vue and Axios

<! Buefy vue uploads -->

<form  method="post" enctype="multipart/form-data">
    <b-field class="file is-primary" :class="{'has-name': !! file}">
        <b-upload v-model="file" class="file-label" @input="getModifyAvatar()">
            <span class="file-cta">
                <b-icon class="file-icon" icon="upload"></b-icon>
                <span class="file-label">Click to upload</span>
            </span>
            <span class="file-name" v-if="file">
                {{ file.name }}
            </span>                    
       </b-upload>
   </b-field>
</form>

<script>
    export default {
        data(){
            return {
                userInfo: ' '.// Assign user-specific information to it via a GET request
                file: null,}},methods: {
            // Change the profile picture
            getModifyAvatar(){
                const formData = new FormData();
                // Construct formData
                formData.append('avatar'.this.file)
                // Submit put request
                getModifyInfo(formData).then(res= > {
                    this.userInfo.avatar = res.data.avatar
                })
            },
        }
    }
</script>
Copy the code

// api.js
// This is the global request method I encapsulated
import { request } from '.. /network/request'

// Modify the user profile picture
export const getModifyInfo = (params) = > {
    return request({
        url: 've_register/1/'.method: 'put'.headers: { 'Content-Type': 'multipart/form-data' },
        data: params
    })
}
Copy the code

Enctype =”multipart/form-data”; encType =”multipart/form-data”;

The append() method is the only method used in FormData. Most of the articles on FormData on the web only refer to the append() method. In fact, we can console to know:

The FormData object has so many methods that we have to test it ourselves to find out. Here are some of the methods:

append()

The append() method is used to add key-value pairs to the FormData object:

fd.append('key1'."value1");
fd.append('key2'."value2");
Copy the code

Fd is a FormData object that can be created as an empty object, or that already contains a form or other key-value pair.

set()

Set the value of the corresponding key value(s)

fd.set('key1'."value1");
fd.set('key2'."value2");
Copy the code

The append() method is similar. The difference is that when the specified key is present, the append() method ends all newly added key-value pairs, while the set() method overrides the previous set of key-value pairs. For example, append() or set() a new key pair from the previous form:

fd.append('name'."will");
Copy the code

There are two key-value pairs with key name:

That’s the difference between append() and set(). If the set key does not exist, the effect is the same.

delete()

Receive the name of the key that you want to delete. If multiple keys are the same, delete all of them:

fd.append('name'.'will');
fd.delete('name');
Copy the code

The name information in the form and the new name information added through append() are removed.

The get () and getAll ()

Receives a parameter that represents the name of the key to be searched and returns the value of the first key. If there are multiple keys that are the same, and you want to return all the values of that key.

Also based on the form above:

fd.append('name'.'will');
console.log(fd.get('name')); // sean
Copy the code

fd.append('name'.'will');
console.log(fd.getAll('name')); // ["sean", "will"]
Copy the code

has()

The method also takes a parameter, again the name of the key, and returns a Boolean value that determines whether the FormData object contains the key. Take the form above as an example:

console.log(fd.has('name')); // true
console.log(fd.has('Name')); // false
Copy the code

The other several will not be introduced, we are interested in their own verification, write again, knock again, than to see any article to the truth yo!

If the above articles are helpful to you, please give us open source projects little star: github.crmeb.net/u/xingfu appreciate!