element upload 图片上传 回显 及删除

这篇具有很好参考价值的文章主要介绍了element upload 图片上传 回显 及删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element upload 图片上传 回显 及删除

目标需求

  • 图片上传
  • 图片回显
  • 可以删除图片
  • 效果图 el-upload 删除,javascript,前端

实现

模板
	<el-form-item :label="$t('station.img')" prop="images">
          <el-upload
            :limit="3"
            action=""
            accept=".png, .jpg"
            show-file-list
            :on-change="handleChange"
            :on-remove="handleRemove"
            list-type="picture-card"
            :file-list="fileList"
            :auto-upload="false"
            multiple
          >
            <i slot="default" class="el-icon-plus" />
          </el-upload>
        </el-form-item>
js
  data() {
    return {
      fileList: [],//这个必须要有,用来同步组件中的fileList
      form:{
			images:[] //表单中的图片列表
		}
     }
   methods: {
   // 删除图片时候同步到表单删除
   handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => {
        return item.uid === file.uid
      })
      this.form.images.splice(index, 1)
      this.fileList.splice(index, 1)
    },
    // 上传
    handleChange(file, fileList) {
      const isImg = (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg')
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isImg) {
        this.$message.error(this.$t('common.uploadTip8'))
        this.fileList.splice(this.fileList.length, 1)
        return false
      }
      if (!isLt1M) {
        this.$message.error(this.$t('common.uploadTip3'))
        this.fileList.splice(this.fileList.length, 1)
        return false
      }
      // 同步组件中的fileList
      this.fileList = JSON.parse(JSON.stringify(fileList))
      const formData = new FormData()
      formData.append('file', file.raw)
      // 调用上传接口获取对应的http图片地址
      uploadFile(formData).then((res) => {
        this.form.images.push(res.data.fileList[0].path)
      })
    },
    // 超出图片数量时候的提示
    handleExceed(files, fileList) {
      this.$message.warning(this.$t('common.uploadTip9'))
    },
    // 回显
    getDetail() {
      getStationInfo(this.$route.query.id).then((res) => {
        this.form = res.data
        // 这一步是回显必要的,赋值给fileList
        if (this.form.images) {
          this.form.images.forEach(item => {
            this.fileList.push({
              url: item
            })
          })
        }
      })
    }
}

难点

理解 upload 中的 fileList 这个参数,需要将这个参数存起来回显,以及删除的时候找到对应删除的图片下标文章来源地址https://www.toymoban.com/news/detail-605565.html

到了这里,关于element upload 图片上传 回显 及删除的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包