element 上传图片

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)

        }