vue七牛云上传图片

1.安装七牛云

npm安装

npm install qiniu-js

yarn安装

yarn add qiniu-js

在单个页面引入

import * as qiniu from "qiniu-js";

                    <van-uploader :after-read="afterRead" :before-delete="beforeDelete" :max-count="1" v-model="fileList"
                        style="position: relative;">
                        <div style="position: relative; width: 86px;height: 86px;">
                            <img src="../img/uploader.png" alt="">
                            <div class="slogo">上传logo</div>
                        </div>
                    </van-uploader>

 //上传文件 判断是否为.png-.jpg .gif .jpeg
 afterRead(files) {
            // 此时可以自行将文件上传至服务器
            const indexOfSuffix = files.file.name.lastIndexOf(".");
            const suffix = indexOfSuffix >= 0 ? files.file.name.substr(indexOfSuffix) : "";
            if (suffix === '.png' || suffix === '.jpg' || suffix === '.gif' || suffix === '.jpeg') {
                this.uploadFile(files.file);
            } else {
                Toast('暂不支持该图片格式');
            }
        },

        //上传图片 首先调取接口获取七牛云的token
   uploadFile(file) {
            const indexOfSuffix = file.name.lastIndexOf("."); //后缀名
            const suffix = indexOfSuffix >= 0 ? file.name.substr(indexOfSuffix) : "";
            const filename = "op_" + moment().unix() + suffix; // 时间戳+后缀名
            const key = this.pre + filename
            if (file) {
                this.axios.get('apply/guild/getUploadToken').then(res => {
                    if (res.data.Code === '8000') {
                        const putExtra = { fname: "", params: {}, git: null };
                        const config = { useCdnDomain: true, region: qiniu["region"].as0 };
                        let observable = qiniu["upload"](
                            file, //要上传的文件对象。
                            key, //上传到七牛云后的文件名或路径(也就是图片的后缀)。
                            res.data.Result.UploadToken, //从服务器获取的七牛云上传凭证。
                            putExtra, //额外的设置参数，包括文件名、自定义参数和自定义变量。
                            config //配置参数，设置是否使用CDN加速和所选的七牛云存储区域。
                        );
                        observable.subscribe({
                            next: ((response) => {
                                if (response.total.percent >= 100) {
                                    Toast('上传成功');
                                }
                            }),
                            error: ((err) => {
                                Toast('上传失败,请稍微再试');
                            }),
                            complete: ((response) => {
                                const key = response.key; // 获取七牛云返回的 key
                                // 在这里可以进行后续操作，如保存 key 到数据库等
                                this.from.LogoImg = key
                            })
                        })
                    }
                })
            }
        }