FormData文件提交

提交方法：

接口经常要用到FormData提交文件，就记录一下

实现：new一个FormData类型，append如文件，提交的时候给接口请求头加上'Content-Type': 'multipart/form-data'

upData(file){
　　const form = new FormData()
　　form.append('file',file.raw)
　　this.ajax.post(`/admin/miniApp/conf/mchCertUpload`, form, { 'Content-Type': 'multipart/form-data' } )
}

文件提交样式：

html

    <el-upload
                        class="upload_wrap"
                        :auto-upload="false"
                        drag
                        action="#"
                        multiple
                        :on-change="
                            e => {
                                return fileListChange(e, 'bannerUrl')
                            }
                        "
                        :show-file-list="false"
                    >
                        <i v-if="!addForm.bannerUrl" class="el-icon-upload"></i>
                        <div v-if="!addForm.bannerUrl" class="el-upload__text">
                            {{ $t('batchImport.descF') }}
                            <em>{{ $t('batchImport.descS') }}</em>
                        </div>
                        <el-image class="editImg" v-if="addForm.bannerUrl" :src="addForm.bannerUrl"></el-image>
                    </el-upload>

css

// 附件上传
.upload_wrap {
    text-align: center;
    .el-upload-dragger {
        background-color: transparent;
        width: 100%;
        height: 195px;
        // color: #fff;
        @include file_border(#d9d9d9);
        &:hover {
            @include input_border(#111111);
        }
    }
    .el-upload__text {
        @include input_placeholder(#ffffff);
    }
    .el-upload__tip,
    .el-upload-list {
        text-align: left;
        padding-left: 30px;
    }
    .el-upload__tip {
        color: #999999;
        font-size: 12px;
    }
}
.editImg {
    width: 100%;
    height: 100%;
}

效果

 

 列表展示图片

html

    <el-table-column show-overflow-tooltip prop="bannerUrl" :label="$t('banner.bannerUrl')">
                    <template slot-scope="scope">
                        <el-image
                            v-if="scope.row.bannerUrl"
                            class="rowImg"
                            :src="scope.row.bannerUrl"
                            :preview-src-list="[scope.row.bannerUrl]"
                        ></el-image>
                    </template>
                </el-table-column>

css

.rowImg {

    width: 100px;

    height: 100px;

}

效果