Vue 表单上传,文件上传

289 阅读1分钟

包含单个文件,请求参数

req = {
    name:'aaa',
    file:二进制
}

包含多个文件,请求参数

req = {
    name:'aaa',
    file:二进制,
    file:二进制,
}
<!-- 表单 -->
<el-form ref="formRef" :model="newAgencyForm" :rules="rules" label-width="115px">
    <el-form-item label="新机构简称" prop="newAgencyName">
        <el-input v-model="newAgencyForm.newAgencyName" placeholder="请输入新机构简称"></el-input>
    </el-form-item>
    <el-upload
        v-model:file-list="newAgencyForm.files"
        multiple
        :on-change="handleChange"
        :on-remove="handleRemove"
        :auto-upload="false"
        list-type="picture"
        name="files"
    >
        <el-button type="primary">上传</el-button>
    </el-upload>
</el-form>
<el-button type="primary" @click="submit">确认</el-button>
<script>
    const newAgencyForm = ref({
        newAgencyName:'',
        files:[]
    })
    // js对象转为formData格式的数据
    obj2formdata(req){
        const formdata = new FormData()
        for (const k of Object.keys(req)) {
            if(k=='files' && req[k]){
                req[k].forEach(item => {
                    formdata.append('files', item.raw)
                });
            }else if (req[k]) {
                formdata.append(k, req[k])
            }
        }
        return formdata
    }
    submit(){
        const formdate = obj2formdata(newAgencyForm.value) // 将表单对象转为FormData格式
        const res = await http.post('/upload/xxform', formdata) // 将表单数据上传
    }
    
</script>