vue使用iview中Upload上传组件

先上代码,注解在下面 html代码

<template>
<Upload
	multiple 
	action="Api/api/sys/fileController/uploadFile"
	:before-upload="handleUpload"
	:data="fileData"
	:on-success="successEvent"
	>
	<Button icon="ios-cloud-upload-outline" type="primary">上传</Button>
</Upload>
<template>
script代码
<script>
export default {
 data() {
	    return {
	    //文件上传携带参数
	      fileData: {
	        companyCode: "1",
	        file: "",
	        serviceType: "finacie",
	        tenantCode: "1",
	      },
	    }
   	},
 methods: {
  	//上传文件之前的钩子
 	handleUpload(file) {
      this.fileData.file = file.name;
 	},
 	//上传成功钩子
 	successEvent(response) {
      console.log(response)
    },
 },

}
</script>

multiple 支持多选文件 action="Api/api/sys/fileController/uploadFile" Api为vue.config.js中devServer对象里target:"Url" 也就是反代理的请求地址

/api/sys/fileController/uploadFile 为后台文件上传(返回存储的url)的接口

fileData对象里的要传些什么,是后台接口写好的

successEvent里response会返回储存的Url

最重要的事 请求头一定要配置为 multipart/form-data' 如下例: 一个请求可以配置多个请求头,自动调用. axios.defaults.headers.post['Content-type'] = 'multipart/form-data' axios.defaults.headers.post['Content-Type'] = 'application/json'

查看是否调用成功 F12 点击Network 会看到Header 查看Request Headers 后端 请求头 注意 不是Response Headers 前端 请求头 iview对Upload组件有详细的介绍,要注意before-upload before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 只要这个钩子中有错,返回false ,一切白搭 我在这上面踩了个坑,也可以说是没有注意细节,我在before-upload里出了点错,然后接着使用后面的钩子去发送请求.然后问题来了,怎么发请求都报错 还有一个小插曲 :before-upload="handleUpload" :on-success="successEvent" 如果写成@before-upload="handleUpload" @on-success="successEvent" 是不会触发的,看了有些博文里写@,不明所以,可能是版本原因吧.