zoukankan      html  css  js  c++  java
  • element el-upload新增或编辑文章时上传与删除文件

    在新增时,需要给后端一个数组对象,对象里包含name和url属性
    在编辑时,后端会给前端返回一个数组对象,对象里包含name和url属性
    在使用el-upload组件上传或者删除文件时,组件会自动给:file-list绑定的数组对象中的所有对象,添加一个uid属性,我们可以通过这个属性,对数据进行新增或者删除

            <el-form-item label="附件">
                  <el-upload
                    class="attachment-uploader"
                    :action="uploadAttachmentUrl"
                    :on-remove="handleRemoveAttachment"
                    :before-remove="beforeRemoveAttachment"
                    :on-success="onAttachmentUploadSuccess"
                    multiple
                    :file-list="dataForm.attachmentList">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
    
          onAttachmentUploadSuccess (response, file, fileList) {
            console.log('upload success')
            this.dataForm.attachmentList.push({name: file.name, url: response.path})
            console.log(this.dataForm.attachmentList)
          },
          // 删除附件提示
          beforeRemoveAttachment (file, fileList) {
            return this.$confirm(`确定移除 ${file.name}?`)
          },
          // 删除附件
          handleRemoveAttachment (file, fileList) {
            this.dataForm.attachmentList = this.dataForm.attachmentList.filter(item => item.uid !== file.uid)
          },
    
  • 相关阅读:
    网络 图片缓存
    大流量 网站
    20个 css3 html5 设计工具
    tomcat6.0 内存设置
    销售订单流程图
    android 自带 xml解析
    常见边框
    Expanding Cat5e LAN segments over 100 metres using OUTREACH Ethernet LAN extenders
    CPU频率和FSB瓶颈
    SmallNetBuilder's Wireless FAQ: The Essentials
  • 原文地址:https://www.cnblogs.com/ilovepan/p/14332797.html
Copyright © 2011-2022 走看看