> >

Vuejs3+Strapi+Axios实现图片上传

后端开发前端开发StrapiVue.js 406

类似内容

这是继VueJS 3 + Strapi CRUD示例代码的后续，单独说一下图片文件的上传实现思路和代码

Vuejs3+Strapi+Axios实现图片上传

一 构建表单

<div class="p-2 w-50 bd-highlight">
                            <img width="250" height="250" :src="profile" />
                            <input class="m-2" type="file" @change="imageUpload" id="ProfileUpload">
                        </div>

注意此处使用了Vue的@change，在change事件中会调用imageUpload方法，这意味着不管是创建还是修改数据，只要选择了新的图片之后 图片会先上传到strapi的服务端。在上传到服务端之后response.data会返回图片信息，需要注意的是要拿到图片的id

data()部分

    data(){
        return {
            departments: [],
            employees: [],
            modalTitle: "",
            name: "",
            id: 0,
            department: "",
            DateOfJoining: "",
            profile: variables.PHOTO_URL + "/uploads/profile_1bfe3b2ecc.jpg",
            PHOTO_SERVER: variables.PHOTO_URL,
            imgId: 0,
        }
    },

二 imageUpload文件上传的实现

在methods中添加该函数

imageUpload(){
            let formData = new FormData();
            let imageFile = document.querySelector('#ProfileUpload');
            formData.append('files', imageFile.files[0]);
            axios.post(
                variables.API_URL + "upload/",
                formData)
                .then((response)=>{
                    this.profile = this.PHOTO_SERVER + response.data[0].url;
                    console.log(response);

                    //Link image to a content type
                    const imageId = response.data[0].id;
                    this.imgId = imageId;
                    if(!this.id) return;
                    axios.put(variables.API_URL + "employees/" + this.id, {profile: imageId}).then((res)=>{
                        //handle success
                        //console.log(res.data);
                    }).catch((err)=>{
                        //handle error
                    })

                }).catch((error)=>{
                    //handle error
                    console.log(error);
            })
        }

三 图片上传的实现

同样写在methods中，思路是先拿到数据的id，如果是创建的则在创建成功后返回id，然后再根据此前图片上传成功后取得的imgId，用put来更新改content-type中的profile图片字段，以此来做媒体文件关联

createClick(){
            axios.post(variables.API_URL + 'employees',{
                name: this.name,
                department: this.department,
                DOJ: this.DateOfJoining,
            })
            .then((response) => {
                this.refreshData();
                alert(response.statusText);
                //console.log(this.imgId); 
                
                axios.put(variables.API_URL + "employees/" + response.data.id, {profile: this.imgId}).then((res)=>{
                    //handle success
                    console.log(res.data);
                }).catch((err)=>{
                    //handle error
                })
                //console.log(response.data);

                //CLOSE MODAL
                let btnClose = document.querySelector('#btnCloseModal');
                btnClose.click();
            });
        },

Post Comment