VUE+Element Ui+axios 上传多张图片

VUE+Element Ui+axios 上传多张图片

单文件上传：
上传单个文件：https://blog.csdn.net/weixin_47083714/article/details/121285181?spm=1001.2014.3001.5502

这里我们需要取消他的自动上传；在组件里引入axios；
multiple 是否支持多选文件；
auto-upload 是否在选取文件后立即进行上传；
http-request 覆盖默认的上传行为，可以自定义上传的实现

如果我们想自己渲染列表的话需要添加
show-file-list 是否显示已上传文件列表

				
				选取文件
				上传文件
				  
文件列表
			
			```



在使用组件内引入axios
import axios from 'axios'


然后我们在data里需要定义
		data() {
			return {
				loading: false,
				fileList: [],
				URL: process.env.VUE_APP_HTTP_BASE_URL + '上传路径',
				headers: {
					Token: localStorage.getItem('Token'),
				},
			};
		},

接下来就是涉及到的上传方法了

submitUpload() {
				this.loading=true;
				if(this.fileList.length <=0){
					this.$message.error("文件上传不能为空");
					this.loading=false;
				}
				else{
					let formData = new FormData();
					this.fileList.forEach(item =>{
						formData.append('files',item.raw)
					})
					formData.append('fileId',this.fileId)
					formData.append('claimId',this.claimId)
					var url = this.URL;  
					        const config = {
					        headers: { "Content-Type": "multipart/form-data"
					            }
					        };
					
					// const config = headers:{ "Content-Type": "multipart/form-data"
					//             }
					//         };
					 
					 axios.post(url,formData,config)
					         .then((res) => {
					           //console.log(res.data);
					           if(res.data.code == 200){
								   
					           this.$message({
					               message: '导入成功',
					               type: "success",
					               });
								 this.loading=false;  
								this.$emit('g');
					           //this.$router.go(0)
					           this.getList()
					           }else if(res.data.code == 101){
					           this.$message({
					               message: 'token失效',
					               type: "success",
					               });
								   this.loading=false;  
					           }
							   
					           else{
					           this.$message({
					               message: '导入失败',
					               type: "success",
					               });
								   this.loading=false;
					           }
							   
					         })
					         .catch(function (error) {
					           console.log(error);
					         });
				}
				
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
				console.log(file, fileList);
			},
			onChange(file, fileList) {
				this.fileList = fileList;
				console.log(this.fileList);
			},
			handlePreview(file) {
				console.log(file);
			}

这样我们的上传多张图片就可以实现了，有说明建议或者是更好的方法，欢迎提出意见。