vue+elementUI 实现图片上传预览功能

准备工作：你需要一个后台接口，你传文件给他，他返回一个图片在线链接。ok，开干！

用到的是elmentUI里的el-upload,先去看官网例子。我用到的是图片列表

先把html的框架copy过来，然后根据自己的需求取取舍内容。这个直接复制粘贴的事情，耐心的elemntUI的官网，不要急躁哈

   
       点击上传
    

 最重要的就是: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自带的那个隐藏掉。

    

        
//el-image自带一个点击图片查看大图的事件
         
{{ item.name }}
          

              

              

          
     
 

预览列表里我弄了两个数组，一个就是图片数组，里面不光放了图片，还放了图片的名字，另一个是预览图片数组，elmentUI在预览的时候，需要一个只放图片链接的数组，所以我就单独弄了一个。这两个数组都是在函数里面放进去的，函数会返回你上传图片的详情信息的。

预览的效果就和官网一样了。 

 

可放大可缩小，你的预览图片数组里面有多个值，还可以上下翻动，这个还是挺好用的。

小菜鸟终于搞完了上传图片，应该还有可以提升和简化代码的地方，先记录下来现在这个，以后再学习更多。主要就是卡在不会上传这里，数据拿formdata处理一下，就好了。搞清楚 el-upload 里面的参数都是些什么意思，就好了。