el-upload 上传文件

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

1HTML

                    <el-row>
                        <el-col :span="24">
                            <el-form-item class="num-index-10"
                                label="资产证明"
                                prop="asset_proof_urls">
                                <el-upload ref="upload"
                                    :action="uploadUrl"
                                    :limit="10"
                                    accept=".xlsx, .docx, .pdf, .word,"
                                    :before-upload="beforeUpload"
                                    :data="uploadData"
                                    :on-change="onChange"
                                    :on-exceed="onExceed"
                                    :on-error="onError"
                                    :on-success="onSuccess"
                                    :file-list="imgUrl">
                                    <el-button type="primary"
                                        class="up-url"
                                        size="small"
                                        plain>上传清单</el-button>
                                </el-upload>
                            </el-form-item>
                            <div class="attention">
                                <div class="word">1.根据相关法规需要上传资产证明,收入证明和完税证明等文件，用于进行合格投资人认证;</div>
                                <div class="word">2.支持文件类型包括pdf，word和图片类型png,jdp和bmp;</div>
                                <div class="word">3.单个文件大小不超过3MB</div>
                                <div class="word">4.支持上传多个文件，最多支持10个</div>
                            </div>
                        </el-col>
                    </el-row>

js 

                uploadUrl: process.env.VUE_APP_UPLOAD_URL,

                imgUrl: [],

        computed: {
            uploadData() {
                var data = {
                    appid: process.env.VUE_APP_ID,
                    _t: parseInt(new Date().getTime() / 1000)
                }
                data.sign = this.$http.sign(data);
                return data;
            }
        },



            // 文件超出个数限制时的钩子
            onExceed() {
                this.$message.error('当前限制选择10个文件')
            },
            // 文件状态改变时的钩子
            onChange(file) {
                this.form.file = file.raw
            },
            // 上传文件之f的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
            beforeUpload(file) {
                let size = file.size / 1024 / 1024
                if (size > 10) {
                    this.$message.error({
                        title: '警告',
                        message: `文件大小不得超过10M`
                    });
                }
            },
            // 文件上传成功时的钩子
            onSuccess(res) {
                this.imgUrl.push({
                    name: '',
                    url: res.data.url,
                })
            },
            // 文件上传失败时的钩子
            onError() {
                this.$message.error({
                    title: '错误',
                    message: `文件上传失败`
                });
            },

 

来源：oschina

链接：https://my.oschina.net/u/3949469/blog/3144604