基于 element 批量上传图片和pdf

彼岸无花开

已于 2023-07-21 09:06:53 修改

阅读量717

点赞数

文章标签： elementui html

于 2023-05-25 19:35:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44855207/article/details/130873607

版权

1、背景

基于一次悲惨经历，领导要求一个上传按钮同时上传pdf和图片两种文件，并且存储在一起。

2、实现

image.html
上传代码，其中 multiple 为开启多文件上传

<el-upload :action="myAction()" :show-file-list="false" multiple :before-upload="beforeUploadFile"
           :on-success="handleAvatarSuccess" :data="imgUploadParams">
      <el-button v-if="showUploadButton" slot="trigger" size="small" type="success" plain>上传</el-button>
</el-upload>

回显代码，在回显代码中用v-if判断文件类型，调用imgClickPdf(imgCurrentDataList, index)方法实现pdf的预览功能，:preview-src-list="[item.relativePath]"实现图片的放大查看。

<div :id="index"  style="height: 400px;" class="image-frame" v-for="(item, index) in imgCurrentDataList" ref="testImg">
    <img src="img/delete.jpg" class="delete" @click="deleteImgButton(item)"/>
    <div class="image-text">Page {{index + 1}} - {{item.imgName}} - {{item.txnNo}}</div>
    <div class="image-content">
        <el-image
                v-if="item.relativePath.substring(item.relativePath.lastIndexOf('.') + 1) === 'pdf'"
                @click="imgClickPdf(imgCurrentDataList, index)"
                align="center"
                :src= "item.relativePath"
                onerror="this.onerror=null; this.src='img/pdf.jpg'"
        ></el-image>
        <el-image
                v-else
                @click="imgClick(imgCurrentDataList, index)"
                align="center"
                :src= "item.relativePath"
                :preview-src-list="[item.relativePath]"
                onerror="this.onerror=null; this.src='img/404.jpg'"
        ></el-image>
    </div>
</div>

完整代码

js的全部代码