准备工作：你需要一个后台接口，你传文件给他，他返回一个图片在线链接。ok，开干！
用到的是elmentUI里的el-upload,先去看官网例子。我用到的是图片列表
先把html的框架copy过来，然后根据自己的需求取取舍内容。这个直接复制粘贴的事情，耐心的elemntUI的官网，不要急躁哈
<el-uploadref="placeImg"action="/"accept="image/*":file-list="datalist":http-request="httpRequest" //自定义上传接口:on-preview="handlePictureCardPreview" list-type="picture" //列表以图片的形式展示><el-buttonsize="small"type="primary">点击上传</el-button></el-upload>
最重要的就是:http-request 了，这里写的函数，就是你接口在的地方。:http-request的函数自己就有一个参数，这个参数就是你上传的图片，或者文件信息。
httpRequest(file) { var fd = new FormData() //构造一个 FormData，把后台需要发送的参数都添加进去fd.append('multipartFile', file.file) //传文件fd.append('参数一', '01')fd.append('参数二', '01')this.$axios.post('接口URL', fd).then((response) => {console.log(response)}}).catch((error) => {console.log(error)})},
然后！一定！注意！给后台接口传参数的时候，记得把你的所有的参数用formdata包起来，有几个就写几个，都写进去，然后传参的时候，把你的formdata直接传就行了，不然，你要是直接传file，接口就会报错。如果你出现了以下报错信息，就是和我遇到一样的问题了
基本上就是这个参数传的不对，卡了我好久，因为实在太菜了，不知道问题出在哪里。这个写对了就成功一大半了。
上传成功，elmentUI自己就有一个列表样式，如果不想要，可以自己在html那里跟着自己写一个ul，记得要把elemntUI自带的那个隐藏掉。
<ul class="showImg"><li v-for="(item, index) in 图片数组" :key="index"><el-imageref="Img":src="item.url":preview-src-list="预览图片数组"></el-image>//el-image自带一个点击图片查看大图的事件<p>{{ item.name }}</p><div class="upload-opera"><divclass="view"//写上这个，点击按钮的时候，和图片上的点击事件一样@click="() => $refs.Img[0].clickHandler()"></div><divclass="delete"@click="() => {图片数组.splice(index, 1)预览图片数组.splice(index, 1)}"></div></div></li></ul>
预览列表里我弄了两个数组，一个就是图片数组，里面不光放了图片，还放了图片的名字，另一个是预览图片数组，elmentUI在预览的时候，需要一个只放图片链接的数组，所以我就单独弄了一个。这两个数组都是在函数里面放进去的，函数会返回你上传图片的详情信息的。
预览的效果就和官网一样了。
可放大可缩小，你的预览图片数组里面有多个值，还可以上下翻动，这个还是挺好用的。
小菜鸟终于搞完了上传图片，应该还有可以提升和简化代码的地方，先记录下来现在这个，以后再学习更多。主要就是卡在不会上传这里，数据拿formdata处理一下，就好了。搞清楚el-upload 里面的参数都是些什么意思，就好了。
