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

准备工作：你需要一个后台接口，你传文件给他，他返回一个图片在线链接。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 里面的参数都是些什么意思，就好了。