vue+vant+axios实现上传进度条

    

vue+vant+axios实现上传进度条

以下代码是示例代码,已在项目中实际使用:

<template>
    <div>
        <div class="head">
            <a @click="$router.push({path: '/OrderRecord'})" class="return"></a>
            投诉
        </div>
        <div class="overlay nav-btm">
            <div class="overlay-content scrolling" style="padding: 0px 15px;">
                <van-field v-model="message" type="textarea" placeholder="请输入您要的投诉内容" rows="8" autosize maxlength="100" />
                <div style="padding: 10px 0px;">
                    <span>请上传凭证</span>
                </div>
                <van-uploader v-model="fileList" @delete="deleteImg" multiple accept="image/*" :max-count="3" :after-read="afterRead" :before-read="beforeRead" />
                <van-progress v-if="percentageType == true" :percentage="percentage" color="#3fb776" style="margin-top: 10px;"/>
                <div style="padding-top: 30px;">
                    <van-button size="normal" class="van-button--info" @click="sure" :loading="loading" :disabled="load" :text="ok"></van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { otc } from './../utils/api';
    let _this;
    export default {
        data() {
            return {
                loading: false,
                message: '',
                fileList: [],
                img: '', // picture
                img2: '', // picture
                img3: '', // picture
                load: true,
                ok: '确认投诉',
                percentage: 0,
                percentageType: false
            }
        },
        beforeCreate() {
            _this = this;
        },
        created() {

        },
        mounted() {

        },
        methods: {
            beforeRead(file) {
                return new Promise((resolve, reject) => {
                    if(file.type === 'image/jpeg' || file.type === 'image/png') {
                        resolve();
                    } else {
                        this.$toast('请上传 jpg 或者 png 格式的图片!');
                        reject();
                    }
                });
            },
            deleteImg() { // 删除文件时触发
                this.ok = '确认投诉';
                this.percentageType = false;
            },
            afterRead(file) {
                this.load = true;
                this.percentageType = true;
                this.ok = '正在上传中,请稍候';
                let param = new FormData();
                param.append('file', file.file, file.file.name);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: progressEvent => {
                        this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
                    }
                }; // 添加请求头
                this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
                    if(res.data.code == 200){
                        if(this.img == '' && this.img2 == '' && this.img3 == ''){
                            this.img = res.data.data[0].url;
                        }else if(this.img && this.img2 == '' && this.img3 == ''){
                            this.img2 = res.data.data[0].url;
                        }else if(this.img && this.img2 && this.img3 == ''){
                            this.img3 = res.data.data[0].url;
                        }
                        this.$toast('凭证上传成功');
                        this.load = false;
                    }else{
                        this.$toast(res.msg);
                    }
                    this.ok = '确认投诉';
                    this.percentageType = false;
                }).catch(()=> {
                    this.$toast("凭证上传失败");
                    this.ok = '确认投诉';
                    this.percentageType = false;
                });
            },
            sure() { // 申诉
                if(!this.message) {
                    this.$toast('申诉内容不能为空!');
                    return false;
                }
                if(!this.img || !this.img2 || !this.img3) {
                    this.$toast('申诉凭证不能为空!');
                    return false;
                }
                this.loading = true;
                otc.getAppealOrder({
                    "orderId": this.$route.query.id,
                    "credentials": this.img + ',' + this.img2 + ',' + this.img3,
                    "remark": this.message,
                }).then(res => {
                    if(res.code == 200){
                        this.$toast('申诉成功');
                        setTimeout(()=>{
                            this.$router.push({
                                path: '/OrderRecord',
                            })
                        },500);
                    }else{
                        this.$toast(res.msg);
                    }
                    this.loading = false;
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .van-cell {
        background: #212639;
    }
    
    /deep/ .van-field__body textarea::-webkit-input-placeholder {
        color: rgb(133, 141, 172)!important;
        font-size: 14px;
    }
    
    /deep/ .van-cell:not(:last-child)::after {
        border: 0;
    }
    
    /deep/ .van-uploader__upload {
        background: transparent;
        width: 70px;
        height: 70px;
    }
    
    /deep/ .van-uploader__preview-image {
        width: 70px;
        height: 70px;
    }
    
    /deep/ .van-uploader__upload-icon {
        color: white;
    }
</style>

核心代码:

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: progressEvent => {
                        this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
                    }
                }; // 添加请求头
                this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
                    if(res.data.code == 200){
                        if(this.img == '' && this.img2 == '' && this.img3 == ''){
                            this.img = res.data.data[0].url;
                        }else if(this.img && this.img2 == '' && this.img3 == ''){
                            this.img2 = res.data.data[0].url;
                        }else if(this.img && this.img2 && this.img3 == ''){
                            this.img3 = res.data.data[0].url;
                        }
                        this.$toast('凭证上传成功');
                        this.load = false;
                    }else{
                        this.$toast(res.msg);
                    }
                    this.ok = '确认投诉';
                    this.percentageType = false;
                }).catch(()=> {
                    this.$toast("凭证上传失败");
                    this.ok = '确认投诉';
                    this.percentageType = false;
                });

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

仅有一条评论

  1. 周
    亲爱的宝贝,你打开控制台想干啥呢? 雨落秋垣:https://aiylqy.com
    当然时为了学习啦,大哥

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。