关于el-upload上传的一些问题

el-upload上传组件使用过程中所遇到的问题

最近实习过程中一直在使用vue，由于初次接触vue，难免会遇到各种各样的坑，本次将要介绍的就是vue的组件库element UI中的el-upload的一些上传问题。

不得不说，vue的组件库element UI的确强大，只要导入库，基本很多样式问题都能解决，包括一些基本功能，比如这里将要说的el-upload（包括文件上传、图片上传、头像上传等）

当然，组件的代码都可以在element UI的官网进行查看，在导入组件库的前提下，直接复用代码即可。下面将展示代码以作示范：

<el-upload class="avatar-uploader"
      action="/brandSetting/changeimage"
       :show-file-list="false"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload"
       name="image"
       :data="{type: 'logo'}"
>
	<img v-if="formData.logoUrl" :src="formData.logoUrl" alt="LOGO" title="修改Logo" class="avatar" >
    <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
    <div class="el-upload__tip" slot="tip">Logo图片只能上传jpg/jpeg/png/gif格式，且大小不超过1M</div>
</el-upload>

而这段代码很简单，问题主要出现在哪呢？能导致问题所在的肯定是参数。

1.第一个问题自然是action的问题，具有前端开发或者实践的都知道action是干嘛的。如果在浏览器下发现报错问题是404，那么一定是action这的路径不对，一定要和后端代码配置的接口对应起来。

2.在下面会看到很多参数，诸如name、data等，这些参数在官网上都有介绍，主要是看你需要哪些。然后最重要的一点就是，前后端的参数一定要对应起来，否则将会出现的问题是，在浏览器下看返回的状态码是200（这里有可能是后端没有做处理，导致参数不匹配也没有返回错误信息，所以这里很坑）。但是，数据并没有录入到数据库，因为后端接口的参数没对应上，方法就不能执行。

3.如果做上传头像功能的，一定需要的效果即，打开页面上时，会显示已有的头像图片。那么，在img标签里一定要写对后端返回的参数。

关于传参问题：

传参的形式是通过绑定data对象，所以出现参数未能成功传到后端，一定要检查前端是否是传递的对象。

大概目前遇到的就只有这点问题，希望对初次接触vue组件库的同学有所帮助。