elementui图片覆盖上传

2021-12-27 11:36:11 阅读：138 来源： 互联网

表单中有个上传图片，表单创建分2次调用接口
图片上传一个接口，每次上传成功，返回一个图片保存的id，然后每次上传图片都会重新赋值新的fileId ，再调用创建表单接口
上传成功之后，调用获取图片接口得到图片的base64，然后拼接url渲染图片

不用limit限制文件个数，使用file-list可以拿到图片的列表
如果用limit限制上传个数的话，上传了一张图片，只有先选择删除它，才能再上传图片。
不限制的话，可以直接点击图片，然后直接选择上传

<el-upload
  ref="upload" action="http://localhost:8080/sys/file/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-success="handleSuccess"
  :on-change="handleChange"
  :file-list="fileList"
  :show-file-list="false"
  :on-exceed="handleExceed"
  :auto-upload="false"
  :headers="myHeaders"
   name="files" 
>
  <el-button v-if="row.fileId==null" size="small" type="primary">上传图片</el-button>
  <el-image v-else ref="img" style="width: 100px; height: 100px"
    :src="url" 
    :lazy="true"
     fit="fill"
  />
</el-upload>

data() {
    return {
      url: null, // 路径
      fileList: [], // 文件列表
      myHeaders: { key: 'xxx' }, //请求头

    }
}
methods: {
 handleChange() {
   if (this.fileList.length === 0) {
     this.$refs.upload.submit()
   }
 },
 handleSuccess(res) {
   this.row.fileId = res.data[0].id
 },
}

标签：调用,覆盖,elementui,接口,表单,上传,id,图片
来源： https://www.cnblogs.com/javaupup/p/15735584.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

elementui图片覆盖上传