el-upload手动上传文件

很多上传场景不需要自动上传，而是需要请求后端上传，并返回成功结果，才算一次上传成功。接下来开始实现如何手动上传文件。

<template>
	<div>
		<el-upload
			ref="uploadButton"
			action=""
			:on-preview="previewFile"
			:on-remove="handleRemove"
			:before-upload="beforeUpload"
			:limit="limit"
			:on-exceed="handleExceed"
			:http-request="uploadFile"
			:on-change="submitFile"
			:on-success="uploadSuccess"
			:auto-upload="false"
			:file-list="fileList"
			:show-file-list="showFile"
		>
			<el-button
				size="small"
				type="default"
				>
				点击上传
			</el-button>
		</el-upload>
	</div>
</template>

文件限制

export const fileLimit=(file,fileType=['pdf'])=>{
	const filePost = file.name.substring(file.name.lastIndexOf('.')+1)
	// 限定文件后缀
	const extension = fileType.findIndex(item=>item.toLowerCase().indexOf(filePost.toLowerCase())>-1)
	// 限定上传文件大小为50MB
	const limit = 50
	const isLimit = file.size / 1024 / 1024 < limit
	if(extension === -1){
		const fileTypeStr = fileType.join(',')
		return {
			limit:true,
			error:`仅支持上传${fileTypeStr}文件`
		}
	}
	return {
		limit: !isLimit,
		error: `文件大小不超过${limit}MB`
	}
}

import { fileLimit } from '@u/util'
export default{
	props:{
		pk:{
			type:String,
			default:''
		},
		fileUrl:{
			type:String,
			default:''
		},
		fileName:{
			type:String,
			default:''
		},
		objId:{
			type:String,
			default:''
		},
		objType:{
			type:String,
			default:''
		},
		isWatch:{
			type:Boolean,
			default:false
		},
		limit:{
			type:Number,
			default:1
		},
		fileType:{
			type:Array,
			default:function(){
				return ['pdf']
			}
		},
		showFile:{
			type:Boolean,
			default:true
		}
	},
	data(){
		return{
			fileList:[],
			file:undefined,
			pic:{}
		}
	},
	methods:{
		beforeUpload(file){
			const body = fileLimit(file,this.fileType)
			if(body.limit){
				this.$message.error(body.error)
			}
			return !body.limit
		},
		previewFile(file){
			if(file.url){
				window.location.href = file.url
			}
		},
		submitFile(file,fileList){
			// 获取上传的文件
			this.file=file.raw
			// 通过submit调用uploadFile
			this.$refs.uploadButton.submit()
		},
		uploadFile(params){
			const form = new FormData()
			form.append('file',this.file,this.file.name)
			this.$http.request({
				url:'common/upload',
				method:'post',
				headers:{'Content-Type':'multipart/form-data'},
				data:form
			}).then(res=>{
				if(res.data.result){
					this.pic={
						'url':res.data.data.file_url,
						'name':res.data.data.file_name
					}
					this.fileList.push(this.pic)
					params.onSuccess()
				}else{
					params.onError()
				}
			})
		},
		uploadSuccess(reponse,file,fileList){
			this.$emit('on-success',this.fileList)
		},
		handleRemove(file,fileList){
			this.$emit('on-remove',fileList)
			this.fileList = fileList
		},
		handleExceed(files,fileList){
			this.$message.warning(`仅可上传${this.limit}个附件`)
		}
	}
}