前端上传文件

接口

export function xxx(data) {

  return request({

    url: "/xxxx",

    method: "post",

    data: data,

    contentType: false,

    headers: {

      "Content-Type": "multipart/form-data",

    },

  });

}

弹框

<el-dialog :title="" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-form-item label="描述">
                    <el-input v-model="form.msg" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="上传文件">
                    <el-upload ref="upload" action="" class="upload-demo" :http-request="httpRequest" :multiple="false" 
                        :limit="1" :auto-upload="false" accept=".rar" :before-upload="checkFileType">
                        <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传rar文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

data

open: false,
 form: {
    msg: "",
    file: ""
},

methods:{
    //自定义上传方法，使用上传组件的submit()后才会触发以获取文件实体
        httpRequest(param) {
            this.form.file = param.file;
        },
        reset() {
            this.form.msg = "";
            this.form.file = "";
        },
        submitForm() {
            //注意执行submit方法后，他会触发upload组件中的 http-request
            this.$refs.upload.submit()
            // 新建form表单
            let formData = new FormData();
            formData.append("msg", this.form.msg);
            formData.append("file", this.form.file);
            //直接log不出来formData
            接口(formData).then((res => {
                if (res.code == 0) {
                    this.open = false;
                    this.reset();
                }

            }))

        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        checkFileType(file) {
            const fileName = file.name
            const fileType = fileName.substring(fileName.lastIndexOf('.'))
            if (
                fileType === '.rar' 
            ) {} else {
                this.$message.error(
                    '不是rar文件,请上传正确的图片类型'
                )
                return false
            }

        },

}