element的多文件上传

项目需求:

可上传多个文件
可删除
文件过大时用户输入可上传至其他网站,并将文件名和地址上传至本网站

问题点:

大文件用户输入内容无法合并到已上传文件的列表进行展示
上传多个大文件地址时前面已上传的大文件会被改变
无法取消弹窗的代码校验

原因和解决方案

大文件信息填写的之后可以将内容push到fileList, 并将值赋值给对应字段
将对象push到数组, 是浅拷贝, 再次对对象进行赋值时, 数组中push的元素会被改变, 需要将浅拷贝改为深拷贝, 例如: push(JSON.parse(JSON.stringify(this.form)))
我原本是想在弹窗出现时取消校验, 但是此时弹窗的DOM还未创建完成(可能是这个原因), 无法获取Dom, 会报错. 可以在点击弹窗的确定, 数据校验成功之后取消校验

所有原因及解决方案都在代码中有备注

element组件代码

<el-upload

          class="upload-demo"

          :action="actionUrl"

          :on-success="handleAvatarSuccess2"

          :before-upload="beforeAvatarUpload2"

          multiple

          :limit="5"

          :on-exceed="handleExceed"

          :before-remove="beforeRemove"

          :on-remove="handleRemove"

          :file-list="fileList"

        >

          <el-button size="small" type="primary">点击上传</el-button>

          <div slot="tip" class="el-upload__tip">

<!--            <p v-for="(itm, idx) of formDate.appendixSaveRequests" :key="idx">{{ itm.fileName }}</p>-->

          </div>

        </el-upload>

    <!--     上传大文件附件时的弹窗-->

    <el-dialog title="提示" :visible.sync="dialogFormVisible">

      <p class="i-info">

        <!--        <i class="el-icon-warning"></i>-->

        如果您需要上传的附件过大，可上传至网盘，在此留下网盘地址</p>

      <el-form :model="form" :rules="formRule" ref="form">

        <el-form-item label="附件名称" prop="fileName" :label-width="formLabelWidth">

          <el-input v-model="form.fileName" placeholder="请输入附件名称" autocomplete="off" />

        </el-form-item>

        <el-form-item label="附件地址" prop="fileUrl" :label-width="formLabelWidth">

          <el-input v-model="form.fileUrl" placeholder="例:http://***.com" autocomplete="off" />

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">取 消</el-button>

        <el-button type="primary" @click="addBigFile">确 定</el-button>

      </div>

    </el-dialog>

// js部分

data () {

    return {

      dialogFormVisible: false,

      form: { // 大文件输入的名称和地址

        fileName: '',

        fileUrl: '',

      },

      fileList: [],

    }

},

methods: {

    // 添加大文件

    addBigFile() {

      this.$refs.form.validate(valid => {

        // 验证fileUrl地址和必填项非恐校验

        var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;

        var re=new RegExp(strRegex);

        if (valid && re.test(this.form.fileUrl)) {

          this.dialogFormVisible = false

          this.form.name = this.form.fileName

        // this.form和this.fileList里的item都为对象类型, push相当于浅拷贝, 再次添加时this.form的值改变, 导致this.fileList里的值重复, 所以需要用深拷贝代替浅拷贝

          let form = JSON.parse(JSON.stringify(this.form))

            // 点击弹窗的确定时将弹窗中的内容push到fileList, 注意: push的字段名称要和fileList原本的字段名称一致

          this.fileList.push(form)

          this.resetForm('form')

        } else {

          this.$message.error('请输入正确的附件地址')

        }

      })

    },

    // 上传之前

    beforeAvatarUpload2(file) {

      const sizeFlag = file.size / 1024 / 1024 < 10

      if (!sizeFlag) {

        console.log(this.fileList, '=======')

        this.dialogFormVisible = true

        this.form.fileName = ''

        this.form.fileUrl = ''

        this.form.isThirdpartyStorage = true

      }

      return sizeFlag

    },

    // 上传成功

    handleAvatarSuccess2(res, row) {

      // console.log(res, row)

      if (res.code === 0) {

        // 下面为项目中上传附件的字段, 可忽略

        this.formDate.appendixSaveRequests.push({

          fileName: row.name,

          name: row.name,

          fileUrl: res.data.url,

          isThirdpartyStorage: false

        })

      }

    },

    // 已删除

    handleRemove(file, fileList) {

      console.log('this.fileList=111111==')

       // 编辑页面删除时要将后端返回的对应的字段内容删除

      this.formDate.appendixSaveRequests.map((item, index) => {

        if(item.uid === file.uid) {

          this.formDate.appendixSaveRequests.splice(index, 1)

        }

      })

    },

    // 达到限制数量

    handleExceed(files, fileList) {

      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件`)

    },

    // 删除之前

    beforeRemove(file, fileList) {

      // return this.$confirm(`确定移除 ${file.name}？`)

    }

}

巴特西

element的多文件上传

最新文章

热门文章