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)

        }