vue+springboot+el-uolpad组件实现文件上传

Vue+Springboot+el-upload组件实现文件手动上传

1.前端Vue + Element-UI库的el-upload组件 + axios发送请求

• el-upload组件代码

  action属性为自动上传时的请求发送地址，此处无用

  auto-upload属性为false，即需要手动点击按钮进行上传

  accpent属性可以限制上传文件类型，直接填入后缀名即可

  file-list属性为当前待上传文件列表

<el-upload
           ref="upload"
           :action="uploadURL"
           accept=".csv"
           :file-list="fileList"
           :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFile">
        上传到服务器
    </el-button>
    <div slot="tip" class="el-upload__tip">只能上传.CSV文件，且不超过10MB</div>
</el-upload>

• uploadFile方法

uploadFile: function () {
   
    // 通过this.$refs.upload获取到上传内容
    let content = this.$refs.upload;
    // 默认只上传文件列表中的第一个文件
    // uploadFiles数组里的file还不能直接发送给后端  
    let file = content.uploadFiles[0]