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;"&gt;
                            <img src="../img/uploader.png" alt=""&gt;
                            <div class="slogo"&gt;上传logo</div&gt;
                        </div&gt;
                    </van-uploader&gt;
 //上传文件 判断是否为.png-.jpg .gif .jpeg
 afterRead(files) {
            // 此时可以自行将文件上传至服务器
            const indexOfSuffix = files.file.name.lastIndexOf(".");
            const suffix = indexOfSuffix &gt;= 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
                            })
                        })
                    }
                })
            }
        }

原文地址:https://blog.csdn.net/lipenghao111/article/details/134691893

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_20268.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注