使用Element-UI中的upload组件结合axios上传多个图片

大家都知道Element-UI官方文档中的upload组件上传多个图片有好几种类型，而且可以使用官方自带的action选择上传地址进行上传。但是官方的上传对个人学习而言不是太友好，不看讲解视频的话会有很多疑问。所以本文要讲的是我个人在学习过程中对upload组件的一种处理，希望对大家有所帮助。

下图展示的是本文内容的效果图。结合对话框组件将图片以展示墙的方式展示出来，展示结果先不上传。当点击确定按钮后先处理再将数据传输到axios内进行本地上传

1. upload上传展示

设置类型为list-type="picture-card"照片墙，然后设置ref方便后续axios获取图片数据，如ref=“pictureUpload”。之后就是对组件内的其他参数的一些配置。如：

<el-upload>
 			list-type="picture-card"
			ref="pictureUpload"
			:limit="9"
			:auto-upload="false"
			:on-remove="handleMaxpic"
			:on-success="handleSuccess"
			:on-error="handleErr"
			:on-exceed="handleExceed"
</el-upload>

也可以对最大数量进行限制，到达最大数量后将添加图片的按钮（.el-upload–picture-card）设为display:none，在没到达最大数量再显示dislpay:inline-block。

2. axios获取待上传图片数组并上传

该内容关键在于前文中设置的ref内容，因为没有设置action的原因，所以要将上传事件绑定在对话框的“确定”按钮上，经过判定后再结合axios进行上传至数据库。

// this.$refs.pictureUpload获取图片上传组件（pictureUpload为前面对ref的命名）
//里面的uploadFiles为待上传图片的数组
 let uploadFiles = this.$refs.pictureUpload.uploadFiles

获取后得到的uploadFiles就是待上传图片的数组，数组里的每个图片都带有图片的参数，如图片的name，percentage,raw,size,status,uid和url等，接着你可以在上传函数里对图片进行上传前的限制和处理，比如对大小和类型的处理等。或者你只在数据库中储存图片的名字，图片的url是固定的一个地方，就可以对uploauploadFiles数组内元素的name进行储存，读取时结合图片地址require获取图片的name，如 :src=“require(‘…/assets/pic/’ + m.Apic + ‘.jpg’)”。
处理完成后就可以使用axios对图片进行上传。例如：

this.$axios({
                        method:'post',
                        // 上传地址
                        url:'http://127.0.0.1:10360/api/user/insert',
                        data:{
                        	token:'',
                            account:this.$store.state.user.account,
                            title:this.form.title,
                            Cpic:this.form.Cpic,
                            content:this.form.content,
                            date:this.form.date,
                        }
                    }).then(res=>{
                    // 上传成功，返回node携带的信息再switch，或者直接if判断信息
                        switch (res.data){
                            case 0:
                                this.$message({
                                    type: 'success',
                                    message: '上传成功！！!',
                                });
                                // 对话框关闭
                                this.dialogVisible2 = false;
                                // 1秒后执行刷新页面，亦或者添加函数对页面重新渲染
                                setTimeout(function(){
                                    location.reload()
                                },1000)
                                break
                        }
                    }).catch(err=>{
                    // 失败信息以消息提示的方式显示
                        this.$message.error(err)
                    })

希望本文对想要自定义上传功能但是却没有思路的读者有些许帮助。
如有错误或补充，欢迎在评论区内指正，谢谢。