element上传多个图片 |
您所在的位置：网站首页 › form表单上传多个图片 › element上传多个图片 |
element上传多个图片
|
在element中给出的图片上传例子其实都是上传完后自动提交，博主在写的时候遇到了很多坑。 1、想要实现多图片上传一定要标注multiple属性、而且一定要是自己手动实现上传功能、这里有两个方法： （1）通过配置file-list,即获取file-list中上传的文件然后封装到FormData()中，最后调用axios传递formData数据到后台 （2）重写http-request="uploadFile"方法，重写了这个方法后调用’this.$refs.upload.submit()，就会自动调用你重写的http-request=""方法，它会根据你上传的图片个数循环调用多少次。如你上传了两张，调用’this.$refs.upload.submit()后内部会自动调用两次http-request=""方法。这样我们在http-request=""方法中设置this.fileList.append(‘file’, item.file)就能将文件封装进一个list中，然后再封装进formData。最后调用axios即可。 注意: 上面两种方法，使用方式是一样的，都是自己封装好一个FormData,然后调用axios，而且axios传递数据一定是data:yourData样式的，千万不要自讨苦吃这样写query:youData 2、element图片组件是默认上传的，添加属性auto-upload="false"后才能关闭。也只有关闭了自动提交后、才能实现手动提交 3、element图片组件自动上传如果没有手动封装FormData数据然后调用axios，即使添加了multiple属性可以上传多个,element图片组件只会是一个图片发送一个请求的，而并非是一个请求多个图片 4、调用this.$refs.upload.submit(),element图片组件会使用默认的上传方式上传文件 如果重写了http-reques方法，那么久会调用http-reques方法,默认上传和’this.$refs.upload.submit()'请求url都是element图片组件上绑定的action，只有自己调用axios才不会使用到这个action 5、如果想要一个请求上传多个图片并附带参数、只能使用formData.append("你的属性名"，属性值)的方式，使用formData.append("实体类名",this.form)是无法成功传数据的 6、关闭自动上传后调用this.$refs.upload.submit()才能生效，默认上传请求url都会是element图片组件上绑定的action，自动上传都是自己调用axios上传的 （1） 点击选择图片 确认上传 //检测文件变动获取文件 fileChange(file, fileList) { this.fileList = fileList; } //检测文件删除 fileRemove(file, fileList) { this.fileList = fileList; } //手动上传图片 submitUpload() { console.log("this.fileList", this.fileList) let formData = new FormData(); // 将文件封装进FormData this.fileList.forEach(file => { formData.append('file', file.raw) }) formData.append("属性名",“你想附带的数据”) //附带数据 // 调用上传接口 importFile(formData).then((res) => { //手动上传无法触发成功或失败的钩子函数，因此需要手动调用 this.upSuccess(res) }, (err) => { this.upError(err) }) }（2） 点击选择图片 uploadFile(file) { this.fileList.append('file', file.file) } // 上传图片 submitUpload() { let formData = this.filedata this.fileList = new FormData() // 将文件封装进FormData this.$refs.upload.submit() // 依据图片个数循环调用uploadFile方法 fileList.append("属性名",“你想附带的数据”) //附带数据 //调用axios上传文件 importFile(this.fileList ).then((res) => { //手动上传无法触发成功或失败的钩子函数，因此需要手动调用 this.updataSuccess(res.data) } } 2、参考博文element多图片上传 https://www.jianshu.com/p/83a9e95dc54a?utm_campaign=haruki |
【本文地址】
今日新闻 |
推荐新闻 |