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

Logo

前往低代码交流专区

更多推荐