Vue上传文件及图片的写法。

1、使用element ui 上传控件（使用以下代码，主动删除错误注释）

 <el-upload action="/ordersetting/upload"    //提交后台地址
     name="excelFile"
     :show-file-list="false"
     :on-success="handleSuccess"   //上传成功后执行方法
     :before-upload="beforeUpload">  //上传前执行方法
 <el-button type="primary">上传文件</el-button>
 </el-upload>

2、上传前验证文件格式的执行方法

（1）Excel校验

//上传之前进行文件格式校验
beforeUpload(file){
   const isXLS = file.type === 'application/vnd.ms-excel';
   if(isXLS){
       return true;
   }
   const isXLSX = file.type === 'application/vnd.openxmlformats- 
   officedocument.spreadsheetml.sheet';
   if (isXLSX) {
       return true;
   }
   this.$message.error('上传文件只能是xls或者xlsx格式!');
       return false;
   }

（2）图片的校验

//上传图片之前执行
beforeAvatarUpload(file) {
	const isJPG = file.type === 'image/jpeg';
	const isLt2M = file.size / 1024 / 1024 < 2;
	if (!isJPG) {
		this.$message.error('上传图片只能是 JPG 格式!');
	}
	if (!isLt2M) {
		this.$message.error('上传图片大小不能超过 2MB!');
	}
		return isJPG && isLt2M;
}

3、上传后提示方法

//上传成功
handleSuccess(response, file) {
    if(response.flag){
        this.$message({
            message: response.message,
            type: 'success'
         });
     }else{
         this.$message.error(response.message);
     }
}