运用 ant 图片上传组建实现pc端图片预览

最新推荐文章于 2024-05-30 18:02:45 发布

晓峰666

最新推荐文章于 2024-05-30 18:02:45 发布

阅读量1.8k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44766377/article/details/124708600

版权

本文档详细介绍了如何使用CSS穿透技术来修改Ant Design的上传组件样式，隐藏默认的删除图标，并展示了如何实现图片预览功能。通过调整样式，设置图片的宽高，以及利用FileReader API来处理图片预览，实现了自定义样式的图片上传列表和预览模态框。此外，还提供了数据处理方法，将base64编码转换为Ant Upload所需的格式。

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

最后效果

展示效果（样式用样式穿透自己可调）

点击预览效果

这里css得做个样式穿透因为ant自带一个删除功能

将垃圾桶图标取消显示

.img{
        /deep/.ant-upload-list-item{
        //宽高设置
          margin:0;
          padding: 0;
          width: 40px;
          height: 40px;
        }
        /deep/.ant-upload-list-picture-card-container{
        //宽高设置
          width: 40px;
          height: 40px;
          margin:0;
          padding: 0;
        }
        //ant样式穿透，将不需要显示的样式禁用
        /deep/.anticon-delete{
          display: none;
        }
      }

html结构

数据来源是item.img是因为我的代码两层v-for不用在意

<!--  显示图片处  -->
<div v-for='(items,indexs) in item.img' :key='indexs'>
    <a-upload class='img'
       list-type="picture-card"
       @preview="handlePreview"
       :file-list=items>
    </a-upload>
</div>

<!--  预览图片  -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>

数据和方法

data(){
    return{
       previewVisible: false,
       previewImage: '',
    }
}


methods:{
handleCancel() {
      this.previewVisible = false;
    },
async handlePreview(file) {
     if (!file.url && !file.preview) {

        let  getBase64 = function(file) {
          console.log('测试')
          return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
          });
        }
        file.preview = await getBase64(file.originFileObj);

      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
  }

}

数据处理

下面url:items就是图片的地址（可以是链接也可是base64）
其他参数在本功能中暂时用不到

this.listData.forEach(item=>{
            // 如果不创建这个img数组 下面的push会检测不到img这个值 会报错
            item.img = []
            if(item.attachments){
              // 先将base64提取出来
              let base64 = item.attachments.split('],[')
              // 再将其转换为 ant能够展示的格式
              base64.forEach((items,indexs)=>{
                item.img.push([{
                  uid: indexs,
                  name: 'indexs',
                  status: 'done',
                  url: items,
                }])
              })

            }
          })