vue3+typescript上传文件到七牛云

青旅半醒 2023-01-12 15:59 373阅读 0赞

本文个人博客地址：[https://www.leafage.top/posts/detail/21414BX0U][https_www.leafage.top_posts_detail_21414BX0U]

> leafage-ms项目写了很久了，但是一直没有完成上传文件的功能，之前看了几次七牛云的文档，折腾了几次，没有成功，今天下了决心必须解决这个问题就又开始了各种找资料，看文档，看示例，终于搞定了。

项目中使用的是vite.js构建的，而且用的是typescript，网上的示例几乎没有，下面来一步步记录如何实现，七牛云的示例代码直接访问是无法访问的，这里就不挂地址了，直接看过程。

#### 首先安装qiniu-js和crypto-js两个依赖，qiniu-js就是上传，crypto-js(记的添加.d.ts支持)是生成token时需要加密用的工具，安装命令如下： ####

yarn add crypto-js qiniu-js -D

在工具/插件目录下新建upload.ts文件，参照官方文档来写上传方法，加密、生成token的方法，首先是上传方法，最终代码如下：

import * as qiniu from 'qiniu-js';
    import CryptoJS from 'crypto-js'
    
    // 请求接口上传图片
    export function uploadFile(file: File) { 
        const uptoken = getToken("ss", "xx", "xx");
        const key = file.name;
        const config = { 
            useCdnDomain: true,
            region: qiniu.region.z2,
            forceDirect: true // 是否上传全部采用直传方式
        };
        const putExtra: any = { 
            fname: file.name, //文件原文件名
            mimeType: ['image/png', 'image/jpeg', 'image/gif'] //用来限制上传文件类型，为 null 时表示不对文件类型限制；
        };
        return qiniu.upload(file, key, uptoken, putExtra, config);
    }

> 注意这里最终返回的是upload()的执行结果，是一个对象，里面有next, error, complete，这里不处理过程和结果，直接返回，在使用的地方进行处理。

***uploadFile()方法需要暴露出去，供组件中使用***

其中getToken()方法的三个参数分别是：accessKey、secretKey、bucketName，需要登录自己的七牛云账号查看，具体操作登陆后，点击头像，然后点击密钥管理，就能看到了，getToken()方法最终代码如下：

function getToken(access_key: string, secret_key: string, bucketname: string) { 
        // 构造策略
        var putPolicy = { 
            "scope": bucketname,
            "deadline": 3600 + Math.floor(Date.now() / 1000)
        }
        var encoded = base64Encode(utf16to8(JSON.stringify(putPolicy)));
        var hash = CryptoJS.HmacSHA1(encoded, secret_key);
        // 构造凭证
        var encodedSign = hash.toString(CryptoJS.enc.Base64).replace(/\//g, '_').replace(/\+/g, '-');
        var uploadToken = access_key + ':' + encodedSign + ':' + encoded;
        return uploadToken;
    }

getToken()方法中的base64Encode()和utf16to8()这两个方法的代码实现如下：

整个上传的方法就完成了，然后在组件使用，示例如下：

import {  uploadFile } from "../../plugins/upload";

在html中添加控件，示例如下：

在方法中调用uploadFile方法，下面示例只上传一个文件：

// 上传文件
        uploadImage(files: Array<File>) { 
          if (files.length > 0) { 
            uploadFile(files[0]).subscribe({ 
              next: (result) => { 
              },
              error: () => { 
              },
              complete: (e) => { 
                let data = { 
                  ...this.postsData,
                  cover: "https://cdn.leafage.top/" + e.key,
                };
                this.postsData = data;
              },
            });
          }
        },

到这里就成功了，不容易呀。

[https_www.leafage.top_posts_detail_21414BX0U]: https://www.leafage.top/posts/detail/21414BX0U