element-ui upload组件

最近在用vue开发一 后台管理系统，搭配着Element-UI—使用。其中—个部分用到了Element-UI中 的upload组件，在用的过程中碰到了不少的小坑，官网上7函数的用法只是在Attribute属性中做了 一些简介，我觉得还不够清晰，所以想写一些我在第一次使用upload组件时候遇到的坑和小问题给大 家分享一下。

坑1/返回值

onSuccess:‘uploadSuccess’ onErron’uploadError’

-	-	-
on-success	文件上传成功时的钩子	function(response. file. fHeList)
on-error	文件上传失败时的也子	function(err. file. fileList)

刚看到红色文字的我，很激动，心应当的就认为：魅on-success钩子的时候就文件上传 成功，触发on-error的时候就代表着文件上传失败。于是哗哗哗就写下了下面几行代码。

	uploadSuccess(){
   
		this.$message((
		message:'恭喜你，上传成功 type: 'success'
		})；
	},
	uploadError(){
   
		this <$message.error('上传失败，请重新上传'); 
	}

嘿嘿嘿，很开心，以为这两个钩子已经完美的处理了我的问题了。在后来测试发现，无论上传成功上 传失败显示的都是：恭喜你，上传生成。这时候我就发现问题来了，上传成功与失败是根据后台小哥 给我返回的status来判断的(我我们这边定义好的接口)，当他返回的status的值为1时就是上传成 功，status的值为0的时候就是文件已经存在，status的值为-1的时候就上传失败。由于后台没有给我 抛出错误，所以根本不会走到。n-error这个钩子。这时候我再仔细的看官方文档发现。n-success钩子 的函数中function(response, file, fileList)第一参数是response,也就是后台给我们返回的结果。于是 我把代码改成下面这样子，终于完美的解决了这个问题。

	uploadsuccess(res)(
		if(res.status==l)(
		this.$message({
   
		message:'恭喜你，上传成功 type: 1 success'
	})；
	}else if(res.status==0){
   
		this.$message((
		message: res.msg, type: 'warning,
	})；
	}else{
   
		this. {
   message. error('上传失败，请重新上传')； }
	},
		uploadError()(
		this.$refs.upload.clearFiles(); this.$message.error('上传失败，请重新上传’)； }
	)

坑2/异歩问题

老大想让我在文件上传前，力0—个弹框，让用户修改文件名字的功能。于是我就想，在before-upload 这个钩子上处理就好了吧（注明：before-叩load这个钩子return fasle的话，文件会停止上传的）。于 是我在before-叩load钩子上直接加了个弹框，代码类似下面的。

	:before-upload="beforeUpload" beforeUpload(){
   
		this.$prompt('请输入文件名’，'提示( conf irmButtonText:'确定', cancelButtonText:，取消
	inputvalue： this.value,
	}).