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}？`)
}}