vue 使用qiniu上传文件到七牛服务器(视频 文件 图片.) 带有真实进度条展示 切记下载最新版qiniu-js!!!!!!!!!!!!!!!!!

**

切记下载最新版qiniu-js!!!

**
需求效果

html代码

 <div class="f2-sub_btn">
            <van-button type="primary" block>
                <span>开始录制视频</span>
                <input
                    type="file"
                    accept="video/*"
                    class="inputvideo"
                    @change="uploadfile($event)"
                    capture="camcorder"
                />
            </van-button>
        </div>

js代码

<script>
import * as qiniu from "qiniu-js";
import { Toast } from "vant";
import store from "../../store";
import axios from "axios";
import Header from "../../components/newhead";
export default {
    name: "myCard",
    data() {
        return {
            url: "../../assets/logo.png",
            urlfan: "../../assets/logo.png",
            value: "",
            multipartFile: [],
            multipartFilefan: [],
            sfghocrplatsrl: "",
            sfrzdblatsrl: "",
            sfzmocrplatsrl: "",
            yxMerchantContent: "",
            commonImgUrl: "",
            qnToken: "",
            custSeqUser: "",
            imageBucketname: "",
        };
    },
    computed: {},
    methods: {
        getQnToken() {//获取qiniu的token等信息
            this.post("/personal/getQnToken", {}).then((res) => {
                this.commonImgUrl = res.commonImgUrl;
                this.qnToken = res.qnToken;
                this.custSeqUser = res.custSeq;
                this.imageBucketname = res.imageBucketname;
            });
        },
        //图片上传 回显 赋值
        uploadfile($event) {
            const file = $event.target.files[0];

            let uptoken = this.qnToken;//后端通过用户名密码获取到的token
            let key = null; //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
            var config = {
                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: qiniu.region.z1, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。  华北地区
                domain: this.imageBucketname, //这里是后端返回的Bucket地址
                chunkSize: 10, //每个分片的大小，单位mb，默认值3
                forceDirect: true, //直传还是断点续传方式，true为直传
            };
            var putExtra = {
                fname: file.name, //文件原始文件名
                params: {},
                mimeType: [] || null,
                // ...config,
            };
            var observable = qiniu.upload(file, key, uptoken, putExtra, config);
            observable.subscribe({
                next: (result) => {
                    //主要用来展示进度
                    // console.log(result);
                    Toast.loading({
                        message: `已上传${result.total.percent.toFixed(0)}%`,
                        forbidClick: true,
                        duration: 0,
                    });
                },
                error: (err) => {
                    //上传错误后触发
                    console.log(err);
                    Toast.loading({
                        message: err.message,
                        forbidClick: true,
                        duration: 0,
                    });
                    setTimeout(() => {
                        Toast.clear();
                    }, 1500);
                },
                complete: (result) => {
                    //上传成功后触发。包含文件地址。
                    console.log(result);

                    this.post("/personal/v1/vivoDetection", {
                        sfzmocrplatsrl: this.sfzmocrplatsrl,
                        imageName: result.key,
                    }).then((res) => {
                        Toast.clear();
                        this.$router.replace("/sign");
                    });
                },
            });

            
        },
        //上传
        change(event) {
            let file = event.target.files[0];
            let videoBase;
            //对录制的视频限制大小
            if (file.size > 1588608) {
                Toast({
                    message: "录制视频时间过长",
                    position: "middle",
                    duration: 1500,
                });
                return;
            } else if (file.size < 211057) {
                Toast({
                    message: "录制视频时间太短",
                    position: "middle",
                    duration: 1500,
                });
                return;
            }

            let reader = new FileReader();
            let that = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
                if (reader.result) {
                    Toast.loading({
                        message: "提交中...",
                        forbidClick: true,
                        duration: 0,
                    });
                    videoBase = reader.result;
                    //请求后端，传递数据
                    console.log(videoBase);
                    that.post("/personal/vivoDetection", {
                        videoStr: videoBase,
                        sfzmocrplatsrl: that.sfzmocrplatsrl,
                    }).then((res) => {
                        Toast.clear();
                        that.$router.replace("/sign");
                    });
                } else {
                    alter("视频录制异常");
                }
            };
        },
        queryPlatsrls() {
            this.post("/personal/queryPlatsrls", {}).then((res) => {
                this.sfghocrplatsrl = res.sfghocrplatsrl;
                this.sfrzdblatsrl = res.sfrzdblatsrl;
                this.sfzmocrplatsrl = res.sfzmocrplatsrl;
            });
        },
    },
    components: {
        Header,
    },
    mounted() {
        this.getQnToken();
        this.queryPlatsrls();
        this.yxMerchantContent = sessionStorage.getItem("yxMerchantContent");
    },
    created() {},
    beforeDestroy() {},
};
</script>