SpringBoot+Vue+ElementUI实现文件上传

上传文件：前端

• 使用ElementUI的上传组件 upload

<el-upload
    class="upload-demo"
    ref="upload"
    action="提交地址"（我们不用，使用手动异步请求提交）
    :http-request="getFile"（提交时做的操作,手动异步请求）
    :before-upload="checkFile"（提交之前做的事情）
    :file-list="fileList"（提交的文件列表绑定）
    :auto-upload="true"（选择文件自动提交，手动提交看官方的例子）
    :limit="1"（限制选取文件的个数）
    accept=".xls,.xlsx,.doc,.docx,.pdf"（可以选择的文件）
>
    <el-button slot="trigger" size="small" type="primary" >
        选取文件
    </el-button>
    <div slot="tip" class="el-upload__tip">
        只能上传xls,xlsx,doc,docx,pdf格式的文件，且不超过 5M
    </div>
</el-upload>

---

• vue部分 data 和 methods

export default {
    data(){
        return:{
            //提交文件列表(只用来展示)
            fileList:[],
            //用于检测后缀名的数组
            fileNameMatch:['xls','xlsx','doc','docx','pdf'],
            //存放上传文件的对象
            uploadFile:{},
            //蒙版
            updwLoading:'',
            //上传地址
            uploadUrl:'上传的后台地址',
            //保存到数据库的实体