• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

vue+elementui 使用el-upload组件实现单个文件手动上传

互联网 diligentman 3天前 7次浏览

实现如下内容:

  1. 选择单个文件,点击手动上传成功
  2. 选择单个文件,再次选择另外的文件时,覆盖源文件,点击手动上传成功
  3. 选择单个文件,点击移除,再次选择文件时,点击手动上传新文件成功

常见问题:

  1. Elementui 版本低时,el-upload组件没有内置:limit限制,通过现有方法控制实现
  2. 在el-upload提供的onChange或onRemove方法中,如果直接使用filelist对象等于赋值,手动上传动作无法触发
  3. 如果不定义临时变量filelist_temp,在点击手动上传按钮时,无法判定文件是否已选取,无论是否选取,filelist均为空数组。

代码实现如下:

<template>
	<div>
		<el-upload 
			ref='upload' 
			style="width: 100%" 
			:action="uploadUrl" 
			:on-remove="handleRemove" 
			:on-change="handleChange"
			:data="uploadData"
			:file-list="filelist"
			:before-upload="handleBeforeUpload"
			:auto-upload="false">
			<el-button type="primary" size="small" slot="trigger">选取文件</el-button>
			<div slot="tip" class="el-upload_tip">仅支持上传单个文件</div>
		</el-upload>
		<el-button type="primary" size="small" @click="submitUpload">上传到服务器</el-button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				uploadUrl: '',
				uploadData: {},
				filelist: [],
				filelist_temp: [], //仅为判断是否已经上传文件使用
			}
		},
		methods: {
			// 附件上传前处理
			handleBeforeUpload(file,filelist) {
				//处理其他数据
				this.uploadData.create_user = ''
				this.uploadData.type = ''
			},
			// 附件移除
			handleRemove(file,filelist) {
				//this.filelist = filelist  //这种方式无法触发手动上传动作
				filelist.splice(0,1)
				this.file_list_temp = filelist
				this.$forceUpdate()
			},
			// 附件变更、上传成功,上传失败
			handleChange(file,filelist) {
				if(file.status === 'ready') {
					// 附件变更
					//this.filelist = filelist  //这种方式无法触发手动上传动作
					if(filelist.length > 1) {
						filelist.splice(0,1)
					}
					this.file_list_temp = filelist
					this.$forceUpdate()
				}else if(file.status === 'success') {
					this.$message({
						type: 'success',
						message: '上传附件成功!'
					})
				}else {
					this.$message({
						type: 'error',
						message: '上传附件失败,请重试!'
					})
				}
			},
			// 上传到服务器
			submitUpload() {
				// if(this.filelist.length > 0)   //
				if(this.filelist_temp.length > 0) {
					this.$refs.upload.submit()
				}else {
					this.$message({
						type: 'info',
						message: '请先上传附件!'
					})
				}
			},
		}
	}
</script>
{{o.name}}


{{m.name}}


喜欢 (0)