vue项目使用element-ui的上传功能

<template>
  <el-upload    
     class="upload-demo"
     style="width: 100px"
     name="formFile"//这个name前端默认是file，后端必须和前端配置的一样，否则报错。
     action="/dev-api/user/uploadfile?type=Company"//上传的API接口，前缀/dev-api是在vue.config.js中配置的服务器地址。
     :on-success="handleAvatarSuccess"//上传成功的回调方法
     :on-change="handleChangeFile"//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     :show-file-list="false"//是否显示已上传文件列表
     :file-list="companyForm.businessPicture"//上传的文件列表
     :multiple="false"//是否支持多选文件
   >
   <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过2MB" placement="bottom">
      <i v-if="formType === 'add'&& !uploadingSuccess" class="el-icon-upload2 upload-icon"></i>
      <span class="uploadAgain">重新上传</span>
    </el-tooltip>
  </el-upload>
</template>

<script>
	data(){
		return{
			companyForm:{
					businessPicture:[]
				}
		}
	},
	methods:{
		// 营业执照上传成功
	    handleAvatarSuccess(res, file) {
	      if(res.code === 200 && res.data.name && res.data.url){
	        this.viewdFormData.credentialsUrl=res.data.url//将返回的图片url赋值给data常量
	        this.uploadingSuccess=true
	        this.$message({
	          message: "上传成功",
	          type: "success",
	        });
	      }
	    },
		// 文件状态改变
	    handleChangeFile(file,fileList){
	      const imgType = file.raw.type === 'image/png'||file.raw.type === 'image/jpeg';
	      const imgSize = file.raw.size/1024/1024 <= 2;
	      if(!imgType){
	        this.$message.error("只能上传png、jpg、jpeg的图片格式！");
	        return false;
	      }
	      if(!imgSize){
	        this.$message.error("图片上传最大限制2MB！");
	        return false;
	      }
	      //如果第二次上传文件，将前一个文件删除
	      if(fileList.length>1){
	        fileList.splice(0,1);
	      }
	    },
	},
</script>