准备工作：你需要一个后台接口，你传文件给他，他返回一个图片在线链接。ok，开干！
用到的是elmentUI里的el-upload,先去看官网例子。我用到的是图片列表
先把html的框架copy过来，然后根据自己的需求取取舍内容。这个直接复制粘贴的事情，耐心的elemntUI的官网，不要急躁哈
<el-upload
ref="placeImg"
action="/"
accept="image/*"
:file-list="datalist"
:http-request="httpRequest" //自定义上传接口
:on-preview="handlePictureCardPreview"
list-type="picture" //列表以图片的形式展示
>
<el-button
size="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-image
ref="Img"
:src="item.url"
:preview-src-list="预览图片数组"
></el-image>
//el-image自带一个点击图片查看大图的事件
<p>{
{ item.name }}</p>
<div class="upload-opera">
<div
class="view"
//写上这个，点击按钮的时候，和图片上的点击事件一样
@click="() => $refs.Img[0].clickHandler()"
></div>
<div
class="delete"
@click="
() => {
图片数组.splice(index, 1)
预览图片数组.splice(index, 1)
}
"
></div>
</div>
</li>
</ul>预览列表里我弄了两个数组，一个就是图片数组，里面不光放了图片，还放了图片的名字，另一个是预览图片数组，elmentUI在预览的时候，需要一个只放图片链接的数组，所以我就单独弄了一个。这两个数组都是在函数里面放进去的，函数会返回你上传图片的详情信息的。
预览的效果就和官网一样了。
可放大可缩小，你的预览图片数组里面有多个值，还可以上下翻动，这个还是挺好用的。
小菜鸟终于搞完了上传图片，应该还有可以提升和简化代码的地方，先记录下来现在这个，以后再学习更多。主要就是卡在不会上传这里，数据拿formdata处理一下，就好了。搞清楚 el-upload 里面的参数都是些什么意思，就好了。