element上传头像

<el-form :model="form" class="tx_sty">
		  <el-form-item :label-width="formLabelWidth" ref="uploadElement">
						  <el-upload ref="upload"
									 action="fakeaction"
									 :http-request="httprequest"
									 accept="image/png,image/gif,image/jpg,image/jpeg"
									 list-type="picture-card"
									 :limit=limitNum
									 :auto-upload="false"
									 :on-exceed="handleExceed"
									 :before-upload="handleBeforeUpload"
									 :on-preview="handlePictureCardPreview"
									 :on-remove="handleRemove"
									 :on-change="imgChange"
									 :class="{hide:hideUpload}">
							<i class="el-icon-plus"></i>
						  </el-upload>
						  <el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="">
						  </el-dialog>
		  </el-form-item>
		  <el-form-item>
		    <el-button size="small" type="primary" @click="uploadFile" :loading="sczt">立即上传</el-button>
		    <el-button size="small" @click="tocancel">取消</el-button>
		  </el-form-item>
		</el-form>

js部分

	let _this;
	export default {
		name:"txsc",
	    data() {
	      return {
			   hideUpload: false,
			   dialogImageUrl: '',
			   dialogVisible: false,//图片预览弹窗
			   formLabelWidth: '80px',
			   limitNum: 1,
			   form: {},
			   ryid:'',
			   sczt:false
	      };
	    },
	    methods: {
			    // 上传文件之前的钩子
			    handleBeforeUpload (file) {
			      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
			        this.$notify.warning({
			          title: '警告',
			          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
			        })
			      }
			      let size = file.size / 1024 / 1024 / 2
			      if (size > 2) {
			        this.$notify.warning({
			          title: '警告',
			          message: '图片大小必须小于2M'
			        })
			      }
			      let fd = new FormData();//通过form数据格式来传
			      fd.append("picFile", file); //传文件
				  
			      // console.log(fd.get('picFile'));
				  this.pub.getBase64(file).then(res => {
						// console.log(_this.ryid);
						_this.$ajax.post('http://192.168.1.127:61074/file/rytxsc',{
								tx:	res,
								ryid:_this.ryid
						}).then(res => {
								 // console.log(res);
								 _this.sczt=false;
							_this.$alert('上传成功！', {
							  confirmButtonText: '确定',
							  callback: action => {
								  _this.$emit("zt",false);
							  }
							});
						});
				  });
			    },
				//覆盖上传原有action提交，自定义提交方式也会出发提交文件的钩子函数
				httprequest() {
						// console.log("sadf")
				},
			    // 文件超出个数限制时的钩子
			    handleExceed (files, fileList) {
			
			    },
			    // 文件列表移除文件时的钩子
			    handleRemove (file, fileList) {
			      this.hideUpload = fileList.length >= this.limitNum;
			
			    },
			    // 点击文件列表中已上传的文件时的钩子
			    handlePictureCardPreview (file) {
			      this.dialogImageUrl = file.url;
			      this.dialogVisible = true;
			    },
			    uploadFile () {
					this.sczt=true;
			      this.$refs.upload.submit()
			
			    },
			    imgChange (files, fileList) {
			      this.hideUpload = fileList.length >= this.limitNum;
			      if (fileList) {
			        this.$refs.uploadElement.clearValidate();
			      }
			    },
			    tocancel () {
			      _this.$emit("zt",false);
			    }
	    },
		mounted() {
			_this=this;
			let value = JSON.parse(sessionStorage.getItem("key"));
			_this.ryid=value.id;
		}
	  };

默认是表单submit提交，所以action可以写后台地址，提交时会触发绑定的钩子函数handleBeforeUpload，但是现实一般还要转给后台传base64码和其他参数，所以可以给upload绑定http-request事件，来覆盖原有的action直接提交的方式，如果在钩子函数里放个ajax就会重复提交，所以可以用http-request覆盖。submit时候就只会触发钩子函数提交。

	getBase64(file){
		return new Promise(function(resolve, reject) {
		        let reader = new FileReader();
		        let imgResult = "";
		        reader.readAsDataURL(file);
		        reader.onload = function() {
		          imgResult = reader.result;
		        };
		        reader.onerror = function(error) {
		          reject(error);
		        };
		        reader.onloadend = function() {
		          resolve(imgResult);
		        };
		      });
	}

注意用箭头函数执行转base64码会先执行调用方法下的代码，所以这是在箭头函数调用成功后执行ajax提交数据