ivew组件中上传组件Upload，后台没有文件服务器，上传图片，图片数据需要前端以base64格式上传，上传附件以format格式上传

最新推荐文章于 2023-04-02 15:18:48 发布

weixin_41987293

最新推荐文章于 2023-04-02 15:18:48 发布

阅读量265

点赞数

文章标签： vue upload

本文链接：https://blog.csdn.net/weixin_41987293/article/details/105436017

版权

本文介绍了在Vue项目中使用iview的Upload组件进行文件上传。当后台没有文件服务器时，图片数据需前端以Base64格式处理并上传，而附件则以Format格式上传。在上传前，会通过钩子函数预先处理文件数据，例如在图片Base64数据前添加"data:image/*;base64,"前缀。" 137129022,22803117,Java可视化实现：走迷宫小游戏与随机迷宫生成,"['Java开发', '图形界面', '算法', '面试技巧', '游戏开发']

摘要由CSDN通过智能技术生成

代码片段：
dom:

<Upload
 ref="upload"
  class="compare-upload"
  :show-upload-list="false"
  :before-upload="handleUpload"
  :format="['png','jpg','jpeg','bmp']"
  :accept="'image/*'"
  multiple
  type="drag"
  :action=actionUpload>
  <div style="padding: 18px 0">
    <i class="h_upload"></i>
    <p class="compare-upload-p">点击上传，拖拽图片到此，也可上传</p>
    <p class="p-tip3">仅支持标准格式上传，最多上传10张</p>
  </div>
</Upload>
<div class="mt16 uploadListBox _clear">
  <div v-show="showFlag=='img'" v-for="(item, index) in uploadList" class="imguploadList" :key="index">
    <div class="imguploadList-img">
      <img  :src="item.imageStr">
    </div>
    <div class="imguploadList-cont"><label>序号：</label><div><Input placeholder="请输入" v-model="item.seqNo"></Input></div></div>
    <div class="imguploadList-cont" @click="openfingerModal(index)"><label>指位：</label><div><Input placeholder=