上传图片签名验证

小墨宝

已于 2022-08-18 08:57:05 修改

阅读量336

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-08-17 21:02:22 首次发布

本文链接：https://blog.csdn.net/qq_38935512/article/details/126394156

版权

vue 专栏收录该内容

130 篇文章 1 订阅

订阅专栏

html

<zl-file-upload ref="zlFileUpload" :httpRequire="httpRequire" :action="action" :file-max-size="10" v-model="ruleForm.rtcUrl"  :limit="1"
                            content="营业执照"  :isrequired='true' support-type="img"
                            list-type="picture-card" >
                        </zl-file-upload>

ruleForm.rtcUrl. 初始化是个数组[]
action: ${process.env.FILE_URL}upload/addFiles,

js

// 上传
        httpRequire(val) {
            console.log(val);
            this.customUploadFile(val, this.sucessFun);
        },
        // 上传成功
        sucessFun(val) {
            this.$refs.zlFileUpload.loading = false;
            this.ruleForm.rtcUrl.push(val);
        },
        customUploadFile(content, invokSuccess, methods = 'post') {
        //这里通过接口去哪签名字段，因为要有顺序对应 返回数组
            let res = [
                { key: 'api', value: 'file.upload' },
                { key: 'appkey', value: '612b67ebe46b6cf349505287b4fff1' },
             
        
            ];
            const formData = new FormData();
            content.file && formData.append('file', content.file);
            res.forEach((item) => {
                formData.append(item.key, item.value);
            });
            // 原生请求。axios试了下不太行
            let xhttp = new XMLHttpRequest();
            let that = this;
            xhttp.onreadystatechange = function () {
                if (xhttp.readyState === 4 && xhttp.status === 200) {
                    let data = JSON.parse(xhttp.response);
                    // 处理回调函数
                    if (data.success) {
                        that.$message.success('文件上传成功！');
                        // 组装下数据
                        let id = `${data.result.resourcesId}/${data.result.fullFileName}`;
                        invokSuccess(id);
                    } else {
                        this.$message.danger(data.msg);
                    }
                }
            };
            xhttp.open('POST', content.action);
            xhttp.send(formData);
        },