element ui vue2 手动上传文件

<!-- html -->
<div class="drawer-content_center_box">
	 <el-upload
		class="upload-demo"
		ref="upload"
		drag
		:action="action" // 上传地址api
		:headers="{}" //根据需求添加header
		:data="{}" //根据需求添加dada参数
		:on-preview="handlePreview"
		:on-remove="handleRemove"
		:on-progress="handleUploadSuccess"
		:on-error="handleUploadError"	
		:before-upload="beforeUpload"					  
		:file-list="fileList"
		:auto-upload="false">
			<div class="upload-demo_default">
				<div class="text">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">文件大小不超过20M</div>
				</div>
			</div>
	</el-upload>
</div>

 

// script
import store from '@/store/index' // 可自行删除
export default {
   data(){
       return{
            fileList:[],
        } 
    },
   computed: {
		action() { // 上传地址
			return `${process.env.VUE_APP_API_ROOT}/survey/sampleData/import`
		},
		token() { // 请求头--根据需求添加，可删除
			return store.state.user.token
		}
	},
    methods:{
        beforeUpload(file) {
			if (file.size > 20 * 1024 * 1024) { 
				this.$message.error('文件大小不能超过20MB')
				return false 
			}
			return true
		},
		submitUpload() {
			if (this.$refs.upload.uploadFiles.length == 0) {
				this.$message.warning('请选择要上传的文件')
				return
			}
			this.$refs.upload.submit()
		},
		handleRemove(file, fileList) {
			const index = fileList.indexOf(file)
			if (index !== -1) {
				fileList.splice(index, 1)
			}
		},
		handlePreview(file, fileList) {
			console.log(file, fileList)
		},
		handleUploadSuccess(response, file, fileList) {
			const that = this
			that.$message.success('上传成功')
			setTimeout(function() {

                // 清除上传成功后数据
				that.$refs.upload.clearFiles()

                // 关闭弹窗
				that.sampleDrawer = false 

                // 上传成功刷新列表
				that.$refs.baseTable.getXGrid().commitProxy('reload')
			}, 1000)
		},
		handleUploadError(error, file, fileList) {
			this.$message.error('上传失败')
				
		}
    }
}