多文件与表单内容一起上传

最新推荐文章于 2024-04-29 10:40:41 发布

团子的小仓库

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量569

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44827018/article/details/127843687

版权

//多文件与表单内容一起上传
//form表单为{}
//上传时，用:on-change获取文件流
handleChange(file){
    //给父组件
    this.allFileList.push(file)
    //自定义显示的已上传列表
    this.fileListForm.formList.push({name:file.name})
}
//父组件页面
<upload ref='upload-demo'>
import axios form 'axios'
//点击上传
next() {
    const foormData = new formData()
    //form表单
    forEachData(this.formInline,formData){
        //自定义方法
        //多个种类文件写法
        uploadFile(this.$refs.upload-demo.allfileList,'Files',formData)
        uploadFile(...)
        ...
        axios.post('上传路径',formData,{header:{'Content-Type':'multipart/form-data'}}).then()
    }
}
//自定义方法
export function forEachData(data, formdata){
    Object.keys(data).forEach((key,index)=>{
        formdata.append(key,data[key])
    })
}
export function uploadFile(data,key,formdata){
    for(const i in data){
        formdata.append(key,data[i],raw)
    }
}