el-upload多文件一次性上传(携带json),自定义上传事件(手动上传),不使用action属性上传
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
情况一:多文件携带json一次性上传,弹窗+简单的表单,未涉及多个文件选择器,所以依旧保留element的submit提交文件方法
<el-upload
ref="upload"
:action="uploadUrl"
:file-list="fileList"
:auto-upload="false"
:http-request="uploadFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload('form')">确 定</el-button>
data () {
return {
uploadUrl: `xx/xxx/xxx`, // 上传的地址
fileList: [],
fileData: '', // 表单数据+文件
form: {
desc:'',
array: []
}
}
},
methods: {
// 自定义上传,以uuid为key
//如果项目对文件的key没有特殊要求,就直接随意设置为file1,file2,file3
uploadFile (file) {
this.fileData.append(uuid.v1(), file.file) // append增加数据
},
// 文件上传并提交表单
submitUpload (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.fileData = new FormData()
this.fileData.append('desc', this.form.desc)
let string = JSON.stringify(this.form.arry)
this.fileData.append('participantListJSONStr', string )
this.$refs.upload.submit()
// 和文件上传地址是一致的,这个是经过封装的接口请求(axios)
this.$service.reviewxxx.uploadFile(this.fileData).then(res => {
if (res.code === '200') {
this.$message.success('上传成功')
}
}).catch(() => {
})
} else {
return false
}
})
},
}
PS:如果表单属性太多,不想一直重复append,可以使用遍历表单对象的方法,例如
for (const key in data) {
formdata.append(key, data[key]);
}
情况二:表单较为复杂,组件嵌套多层,并且有不确定的多个文件选择器,这时候无法给每个文件设置ref="upload",所以不再使用submit方法
<el-upload
action="#"
:file-list="fileList"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChange">选择文件</el-upload>
data () {
return {
fileList: [],
fileData: ''
}
},
methods: {
handleChange (file, fileList) {
if (fileList.length > 1) { // 限制文件只可选择一个
fileList.splice(0, 1)
}
this.fileList = fileList
this.info.fileName = file.name
this.info.operateValue = uuid.v1() + '/' + file.name
this.info.fileList = fileList
},
// 文件上传并提交表单
submitUpload () {
this.fileData = new FormData()
this.dataList.atWebUiCaseStepList.forEach(e=> {
this.fileData.append(e.fileKey, e.fileList[0].raw)
})
this.fileData.append('jsonData', this.jsonData)
this.$service.testCase.saveTestCase(this.fileData).then((res) => {})// 提交数据
}
代码是从项目中直接拷贝,部分代码业务代码没有附上,名称稍微有改动,但是核心代码都在
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)