antdv实现图片的上传、预览以及删除功能

最新推荐文章于 2025-05-20 13:07:15 发布

原创最新推荐文章于 2025-05-20 13:07:15 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

ant design vue 专栏收录该内容

17 篇文章

订阅专栏

该博客围绕图片上传和预览功能展开。需求包括实现图片上传与预览，限制图片张数，且预览时可切换上一张和下一张。还给出了 HTML 和 JS 部分代码，同时提到支持多选文件的属性，展示了上传和预览功能的最终效果。

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

需求：

1.实现图片的上传和预览功能
2.图片不能超过规定的张数
3.预览时，图片可以进行上一张和下一张的切换

html部分代码

<a-button type="primary" ghost
          size="small" class="margin-right10"
          @click="pictureSend(record, index)">上传图片</a-button>
<a-button type="primary"
          size="small"
          @click="picturePreview(record, index)">图片预览</a-button>
<a-modal title="上传图片" v-model="visibleA" ok-text="保存" @ok="handleSaveA" @cancel="handleCancelA">
  <div class="clearfix">
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      list-type="picture"
      :file-list="fileList"
      :multiple="true"
      :remove="handleFileRemove"
      @preview="handlePreview"
      @change="handleChangePicture"
    >
      <a-button block v-if="fileList.length < 8"> <a-icon type="upload"/> 点击上传 </a-button>
    </a-upload>
  </div>
</a-modal>
<a-modal title="图片预览" v-model="visibleB" ok-text="关闭" @ok="handleCancelB" @cancel="handleCancelB">
  <!-----将需要预览的图片放置在model框中--->
  <viewer :images="fileList">
    <img v-for="item in fileList" :src="item.url" :key="item.uid" style="padding:0 10px 10px 0;width: calc(100% /3);height:160px;"/>
  </viewer>
</a-modal>

js部分代码如下：

<script>
// 引入v-viewer库
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
  data() {
    return {
      // 图片路径
      fileList: [
        {
          uid: '-1',
          name: 'image1.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        },
        {
          uid: '-2',
          name: 'image2.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        },
        {
          uid: '-3',
          name: 'image3.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        },
        {
          uid: '-4',
          name: 'image4.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        }
      ],
      visibleA: false,
      visibleB: false
    }
  },
  methods: {
    // 上传图片按钮
    pictureSend() {
      this.visibleA = true
    },
    // 图片预览
    picturePreview() {
      this.visibleB = true
    },
    // 保存
    handleSaveA() {},
    // 取消
    handleCancelA() {
      this.visibleA = false
    },
    // 关闭
    handleCancelB() {
      this.visibleB = false
    },
    // 预览图片调用的函数---》使点击时不进入预览详情
    handlePreview() {
      return false
    },
    // 文件删除
    handleFileRemove (file) {
      console.log(file)
      this.$message.warn('您点击了删除')
    },
    // 上传图片
    handleChangePicture({ fileList }) {
      if (fileList.length <= 8) {
        this.fileList = fileList
      } else {
        this.$message.error('图片最多不能超过八张!')
      }
    }
  }
}
</script>

注意:
:multiple=“true”—>支持多选文件
上传图片功能的最终效果如图：
在这里插入图片描述
预览图片功能的最终效果如图: