1.开发vue后台管理项目的过程中有个上传banner图的需求,但是后台接收的时候是以文件流的形式接收的

直接使用element中上传组件下提供的钩子函数,on-change  ,但是直接得到的file文件不能用

2.解决办法

  改为手动上传, 禁止掉自动上传,

:auto-upload="false"
:http-request="uploadFile" //覆盖默认的上传行为

vue代码
      <el-dialog title="设置" :visible.sync="dialogVisible" width="50%">
            <el-form :model="formparams" ref="formparams" label-width="100px">
                <el-form-item label="上传banner图" ref="uploadElement">
                    <el-upload
                        action="aa"
                        ref="upload"
                        :auto-upload="false"
                        :http-request="uploadFile"
                        multiple
                        :limit=3
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        accept="image/png,image/gif,image/jpg,image/jpeg"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible2">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="选择功能">
                    <el-tree
                        :data="this.getConfigList"
                        :props="props"
                        ref="tree"
                        node-key="id"
                        :default-expanded-keys="this.trueList"
                        :default-checked-keys="this.trueList"
                        show-checkbox
                        @check-change="handleCheckChange">
                    </el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm()">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
   uploadFile(file){
        this.formData.append('uploadFile', file.file);
   },
    async submitForm(){
            this.formData = new FormData()
            this.$refs.upload.submit();
            this.formData.append('type', "banner");//其他参数
            this.formData.append('clubMemberCode', this.formparams.clubMemberCode);//其他参数
            this.formData.append('configInfo', this.formparams.configInfo); //其他参数
            let config = {
                headers: {'Content-Type':'multipart/form-data'}
            }
        //这个类型必选写
           const {data: res} = await this.$http.post('configFunction/saveConfigInfo', this.formData, config)
           console.log(res)
        }
12-31 22:06