Vue+element ui上传图片和视频并回显，点击放大查看和播放

本文链接：https://blog.csdn.net/m0_62118859/article/details/124099178

本文介绍了如何使用Vue和Element UI实现图片和视频的上传功能，并在页面上回显，同时支持点击图片放大查看和视频播放。详细讲解了HTML和JS代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.上传图片

html代码:

<el-upload
  action="#"
  :auto-upload="false"
  :on-change="handleChange"
>
   <el-button class="video_btn iconfont icontianjia3">上传图片</el-button>
</el-upload>
<div
   v-for="(item, index) in urlist"
    :key="index"
 >
   <el-image
    @click="Visibleimg(item)"
    :src="item"
   ></el-image>
</div>
<el-dialog :visible.sync="dialogVisibleimg">
  <img width="100%" :src="url" alt="" />
</el-dialog>

js代码:

handleChange(file, fileList) {
  //限制条件可以通过file判断，比如图片格式
  console.log(file, "file");
  console.log(fileList, "fileList");
  let formData = new FormData();
  formData.append("file", file.raw);
  //上传接口
  addupload(formData,1).then(res => {
     //拿到返回的路径
    let index = res.data.data.lastIndexOf("=");
    let path = res.data.data.substring(index + 1);
    this.$message.success("上传成功");
    //回显接口
    getEventpath(path).then(res => {
    //拿到图片路径回显
    let url = res.request.responseURL;
    this.urlist.push(url);
    });
  });
},
Visibleimg(val) {
  this.url = val;
  this.dialogVisibleimg = !this.dialogVisibleimg;
},

2.上传视频

html代码：


<el-upload
  action="#"
  :auto-upload="false"
  :on-change="videohandleChange"
>
   <el-button class="video_btn iconfont icontianjia3">上传录像</el-button>
</el-upload>
<div
   v-for="(item, index) in urlistmovie"
    :key="index"
 >
   <video
    @click="Visiblemovie(item)"
    style="width: 100px; height: 100px;"
   >
    <source :src="item" type="video/mp4" />
   </video>
</div>
<el-dialog :visible.sync="dialogVisiblevideo">
  <video controls="controls" style="width: 100%;">
     <source :src="movie" type="video/mp4" />
  </video>
</el-dialog>

js代码：


videohandleChange(file, fileList) {
  //限制条件可以通过file判断，比如视频格式
  console.log(file, "file");
  console.log(fileList, "fileList");
  let formData = new FormData();
  formData.append("file", file.raw);
  //上传接口
  addupload(formData,2).then(res => {
     //拿到返回的路径
    let index = res.data.data.lastIndexOf("=");
    let path = res.data.data.substring(index + 1);
    this.$message.success("上传成功");
    //回显接口
    getEventpath(path).then(res => {
    //拿到视频路径回显
    let url = res.request.responseURL;
    this.urlistmovie.push(url);
    });
  });
},
Visiblemovie(val) {
   this.movie = val;
   this.dialogVisiblevideo = !this.dialogVisiblevideo;
},