vue异步跟随表单上传图片单张or多张

boJIke

于 2024-01-25 16:05:24 发布

阅读量740

点赞数 10

文章标签： vue.js 前端 javascript ruoyi

本文链接：https://blog.youkuaiyun.com/bojikeqian/article/details/135846772

版权

文章讲述了在Vue应用中使用el-upload组件进行单张图片上传，并对上传前的文件格式和大小进行验证。同时介绍了如何处理多张图片的POST请求，以及如何将文件数据封装到TyAgentMsg实体类中发送给后端。

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

下面是获取的后台照片展示，我这里限制了图片数量
在这里插入图片描述
limit 为限制的图片数量多少
dialogVisibles 为控制是否有图片
contractPicUrl为展示的图片后台url 若有多张图片需要使用for循环方法

        <el-form-item label="合同照片" prop="contractPic" label-width="80">
          <el-upload
            v-model="forms.contractPic"
            ref="uploadExcelh"
            action="#"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatarUploadh"
            :on-preview="handlePictureCardPreview"
            :limit="1"
            list-type="picture-card"
            accept=".png,.jpg,.jpeg"
            :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
          </el