一、文件上传的三要素是什么？

文件上传的三要素：

表单post请求

input框的type=file

在form表单中添加enctype=“multipart/form-data”

二、具体使用步骤

代码如下（示例）：

<formaction="/"method="post"enctype="multipart/form-data">

<inputname="photo"type="file"/>

</form>

注意：

input框中的type属性等于file

form表单必须是post请求

form表单必须添加enctype=“multipart/form-data”

在后端使用MultipartFile类型参数名必须和前端中的input中的name属性值一致。

第二种方法：el-upload

导入的表格传给后台form-data形式

api.js：

exportfunctionSetPDFile(formFile){

returnrequest({

url:"/Economic/SetPDFile",

method:'post',

data:formFile,

})

}

vue：

<template>

<div>

<el-upload

class="upload"

action="#"

:show-file-list="false"

:on-change="handleExcel"

accept="'.xlsx','.xls'"

:auto-upload="false"

:headers="headers">

<el-buttonsize="mini"type="primary">导入</el-button>

</el-upload>

</div>

</template>

<script>

import{SetPDFile}from"@/api";

exportdefault{

data(){

return{

headers:{"Content-Type":"multipart/form-data;charset=UTF-8"},

}

},

methods:{

//导入表格

handleExcel(file){

letformData=newFormData();//声明一个FormDate对象

formData.append("formFile",file.raw);//把文件信息放入对象中

//调用后台导入的接口

SetPDFile(formData).then(res=>{

//console.log(res)

if(res.Status&&res.Data){

this.$message.success("导入成功");

this.getList();//导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据

}else{

this.$message.error(res.Message)

}

}).catch(err=>{

that.$message({

type:'error',

message:'导入失败'

})

})

},

}

}

</script>