antd上传图片自定义样式

最新推荐文章于 2024-08-13 16:51:37 发布

abcdefghijk12345636

最新推荐文章于 2024-08-13 16:51:37 发布

阅读量873

点赞数

分类专栏： 123 文章标签： vue.js

本文链接：https://blog.csdn.net/hujgg/article/details/123853090

版权

123 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

            <div style="cursor: pointer">
              <a-form-item class="mb" >
                <a-upload  :customRequest="uploadFile" :file-list="fileList" :showUploadList="false" style="width: 200px">
                  <a-button type="link" class="upload-btn"> 上传</a-button>
                </a-upload>

                <div class="user-file-list" v-for="item in fileList" :key="item.uid">
                  <div v-if="item.name.substring(item.name.lastIndexOf('\.')+1,item.name.length)=='txt'">
                    <img src="https://img2.baidu.com/it/u=2427997216,3938917014&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256" alt="" style="width: 30px;height: 30px">
                  </div>
                  <div v-if="item.name.substring(item.name.lastIndexOf('\.')+1,item.name.length)=='png'||item.name.substring(item.name.lastIndexOf('\.')+1,item.name.length)=='jpg'||item.name.substring(item.name.lastIndexOf('\.')+1,item.name.length)=='jpeg'">
                    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bfe456d7e72f32f875520f24ad5f.jpg%40900w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651226663&t=1b4c49130ae42714aca992a2142024c0" alt="" style="width: 30px;height: 30px">
                  </div>
                  <div v-if="item.name.substring(item.name.lastIndexOf('\.')+1,item.name.length)=='docx'">
                    <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/baike/w%3D268%3Bg%3D0/sign=0e438ad0b58f8c54e3d3c22902124ac8/060828381f30e924198bd00f4d086e061d95f7e5.jpg" alt="" style="width: 30px;height: 30px">
                  </div>
                  <a-tooltip :title="item.name">
                    <div class="list-name">
                      <a >{{ item.name }}</a>
                    </div>
                  </a-tooltip>
                  <a-button type="link" @click="removeUpload(item)" class="del-file-btn"> 删除 </a-button>
<!--                  <a-button type="link" target="_blank" :href="item.url" :download="item.url" class="del-file-btn"> 下载 </a-button>-->
                  <a-button @click="downloadFile(item)" class="del-file-btn">下载</a-button>
                </div>
              </a-form-item>
            </div>