Problems encountered when uploading images using axios in Vue

What is FormData?

After much searching and investigation, I learned that this magical thing is a new object added to XMLHttpRequest Level 2, which was proposed in February 2008. It can be used to submit forms and simulate form submission. Of course, the biggest advantage is that it can upload binary files and combine the name and value of all form elements into a queryString and submit it to the background.

Key point: You can combine the name and value of all form elements into a queryString and submit it to the backend. Isn't this what the backend calls converting the data format? Submit it according to the format. The separation of the front and back ends must be asynchronous submission, which can solve this problem very well!

It is also so easy to use. Just pass the form as a parameter to the FormData constructor!

A practical experience with the cooperation of vue and axios

<!--
    *. The upload component in the vue component I use here is buefy's vue component -->

<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 related information to it through a get request file: null,
            }
        },
        methods: {
            // Modify avatar getModifyAvatar(){
                const formData = new FormData();
                //Construct formData data formData.append('avatar', this.file)
                // Submit put request getModifyInfo(formData).then(res => {
                    this.userInfo.avatar = res.data.avatar
                })
            },
        }
    }
</script>

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

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

Looking at the above code, please note that you must set the request header when sending the request. As shown above, you also need to set enctype="multipart/form-data" in the HTML form, otherwise it will not work!

In the above examples, we have only used the append() method of FormData. Most of the articles about FormData on the Internet only mention the append() method. So what methods does the FormData object have? In fact, we can find out by just using the console:

After the console, we have a significant discovery. The FormData object has so many methods, so we still need to test it ourselves to find out the truth. The following will explain these methods one by one:

append()

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

fd.append('key1',"value1");
fd.append('key2',"value2");

fd is a FormData object, which can be a newly created empty object or one that already contains a form or other key-value pairs.

set()

Set the value corresponding to the key key value(s)

fd.set('key1',"value1");
fd.set('key2',"value2");

The append() method is somewhat similar. The difference between the two is that when the specified key value exists, the append() method adds all the newly added key-value pairs to the end, while the set() method will overwrite the previously set key-value pairs. Let's compare them with examples. We append() or set() new key-value pairs based on the previous form:

fd.append('name',"will");

There are two key-value pairs with key name:

The above is the difference between append() and set(). If the key value does not exist, the two have the same effect.

delete()

Receives a parameter, which indicates the name of the key value you want to delete. If there are multiple identical key values, they will be deleted together:

fd.append('name','will');
fd.delete('name');

The name information in the form and the name information added by append() are all deleted.

get() and getAll()

Receives a parameter, which indicates the name of the key to be searched, and returns the first value corresponding to the key. If there are multiple identical keys, all the values ​​corresponding to this key must be returned.

Also based on the above form:

fd.append('name','will');
console.log(fd.get('name')); // sean

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

has()

This method also receives a parameter, which is also the name of the key, and returns a Boolean value used to determine 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

I won’t introduce the other ones. If you are interested, you can verify them yourself. Write them once, type them once, it is more practical than reading any article!

If the above article is helpful to you, please give our open source project a star: github.crmeb.net/u/xingfu Thank you very much!

The above is the details of the problems encountered by Vue using axios to upload pictures. For more information about Vue using axios to upload pictures, please pay attention to other related articles on 123WORDPRESS.COM!