前端如何实现FormData多文件上传功能并且传入参数

前端如何实现FormData多文件上传功能并且传入参数

            <el-form-item label="图片上传（选填）" prop="people">
                <div class="errorUpload">
                    <el-upload
                        action="#"
                        v-if="isphoneLength == true"
                        ref="upload"
                        list-type="picture-card"
                        :auto-upload="false"                     //多文件上传时改为false 就不用再每次上传文件时调用接口函数 
                        :file-list="fileList"                           //file文件列表
                        :on-success="handleUpload"      //上传成功的回调
                        :on-error="handleupError"          // 失败文件的回调
                        :on-progress="handlePro"
                        :on-remove="onRemove"
                        :limit="4"                                   // 限制上传最大上传数量
                        :on-change="handleChange"   //上传时触发文件改变功能
                        accept="bmp, jpg, png, gif, jpeg"
                        :class="{ disabled: uploadDisabled }"
                    >
                        <div style="marginTop:-37px"><i class="el-icon-plus"></i></div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                    <div>
                        <span class="one"> {{ phoneLength }} </span><span class="two">/4</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item style="textAlign:center;marginTop:38px">
                <el-button style="width:200px;height:50px" type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                >
            </el-form-item>
        </el-form>     
        <script>
 import { addErrorApi, upLoadApi } from '@/api/heat.js'
 export default {
data() {
    return {
        ruleForm: {
            name: '',
            phone: '',
            people: '',
        },
        rules: {
            name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        },
        isErrorCorrection: true,
        dialogImageUrl: '',
        dialogVisible: false,
        valueLength: 0,
        phoneLength: 0,
        isphoneLength: true,
        accountId: '',
        UaSysErrorCor: {
            accountId: '',
        },
        // dialogImageUrl: '',
        // dialogVisible: false,
        // uploadUrls: this.BASE_URL + '/admin/upload_image',
        fileList_now: [],
        fileList: [],
        id: '',
        uploadDisabled: false,
    }
},
watch: {
    'ruleForm.name'(val) {
        if (val) {
            this.valueLength = val.length
        } else {
            this.valueLength = 0
        }
    },
    fileList_now(val) {
        if (val) {
            this.phoneLength = val.length
            if (this.phoneLength == 4) {
                this.uploadDisabled = true
                console.log('this.isphoneLength', this.isphoneLength)
            } else {
                this.uploadDisabled = false
            }
        } else {
            this.phoneLength = 0
        }
    },
},
methods: {
    submitForm() {
        this.$refs.ruleForm.validate(valid => {
            let param = this.ruleForm
            this.UaSysErrorCor.describe = param.name
            this.UaSysErrorCor.contact = param.people
            this.UaSysErrorCor.phone = param.phone
            console.log('this.UaSysErrorCor', this.UaSysErrorCor)
            if (valid) {
                addErrorApi(this.UaSysErrorCor).then(res => {
                    if (res.data) {
                        this.id = res.data
                        console.log('this.id9999', this.id)
                        this.UaSysErrorCor.describe = ''
                        this.UaSysErrorCor.contact = ''
                        this.UaSysErrorCor.phone = ''
                        // this.sendCancle()
                        this.upLoadImg(res.data)
                    }
                })
                console.log('id222', this.id)
            } else {
                return false
            }
        })
    },
    // 上传图片接口
    upLoadImg(id) {
        console.log('this.id3', id)
        const fd = new FormData()
        if (this.fileList_now) {
            this.fileList_now.forEach(file => {
                console.log('file', file)
                console.log('file', file.raw)
                fd.append('picture', file.raw)
            })
            fd.append('id', id)    //可以额外添加参数
            console.log('this.id', this.id)
            console.log('fd', fd)
            upLoadApi(fd).then(res => {
                if (res) {
                    this.sendCancle()
                }
            })
        } else {
            this.sendCancle()
        }
    },
    handleRemove(file) {
        console.log(file)
    },
    //获取图片
    getUpload(file) {
        console.log('file', file)
    },
    handlePictureCardPreview(file) {
        console.log('file', file.url)
        this.dialogImageUrl = file.url
        this.dialogVisible = true
    },
    handleDownload(file) {
        console.log(file)
    },
    // 上传成功
    handleUpload(response, file) {
        console.log('response', response)
        console.log('file3', file)
    },
    //上传失败
    handleupError(err, file) {
        console.log('err', err)
        console.log('file2', file)
    },
    // 上传时
    handlePro(event, file) {
        console.log('event', event)
        console.log('file1', file)
    },
    // 移除时
    onRemove(file, fileList) {
        // this.uploadDisabled = false
        console.log('fileList', fileList)
        console.log('file1', file)
    },
    // 提交时
    handleChange(file, fileList) {
        this.fileList_now = fileList
        console.log('this.fileList_now', this.fileList_now)
    },
}
}
</script>