图片上传前端收集 数据 再调用接口发送到后端

组件标签内的参数：

Slot

Methods

 组件的模板结构：

            组件的展现形式点击上传
只能上传jpg/png文件，且不超过500kb

组件所需要的数据：

data(){
return{actionToUrl:'http://127.0.0.1:8888/api/private/v1/upload',UploadHeaders:{Authorization:window.sessionStorage.getItem('token')},AddGoodsForm:{......pics:[],},
}
}

相关事件

进入页面时请求 此商品的数据 并且给 图片列表赋值async created() {const {data:res} = await this.$http.get(`goods/${this.NowEditId}`)if (res.meta.status !==200) return this.$Msg.error('获取商品相关信息失败！')this.AddGoodsForm = res.datathis.AddGoodsForm.pics = this.AddGoodsForm.pics.map(x => {return {url:x.pics_big_url}})},

上传前判断类型和大小beforeJudge(file){console.log(file.type,file.size)if(!(file.type === 'image/jpeg') && !(file.type === 'image/jpg') && !(file.type === 'image/png')){this.$Msg.error('图片必须是：jpg/jpeg/png 格式')return false}if(file.size > (1024 * 500)){this.$Msg.error('单张图片大小不能大于500kb')return  false}},
点击图片预览的回调handlePreview2(file){this.PreviewPic=file.response.data.urlthis.Preview = true},
删除已上传图片的回调  分为删除原有的和自己上传的项  以是否有file.response属性区分handleRemove(file){console.log(file)// 如果删除的是 新上传的图片if(file.response){//1.获取将要删除的图片临时路径const fileUrl = file.response.data.url//2.从pics 数组中，找到这个图片对应的索引值let aaa = this.AddGoodsForm.pics.findIndex(value => value === fileUrl)//3.调用数组 splice 方法 把图片信息对象从pics 数组中移除this.AddGoodsForm.pics.splice(aaa,1)}else {const fileuid = file.uidlet aaa = this.AddGoodsForm.pics.findIndex(value => value.uid === fileuid)this.AddGoodsForm.pics.splice(aaa,1)}},
本地上传成功后 再发送给服务器async handleSuccess(response){// 找出定义一下 新上传文件的路径地址const NewPicUrl = response.data.url// push 到预留表单位中this.AddGoodsForm.pics.push({uid:+new Date(),url:NewPicUrl})const {data:res} = await this.$http.put(`goods/${this.NowEditId}/pics`,this.AddGoodsForm.pics)if (res.meta.status !==200) return this.$Msg.error('更新主图失败！')this.$Msg.success('更新主图成功！')},

完成效果：