使用Qiniu-JavaScript-SDK上传文件至七牛云存储

最新推荐文章于 2024-08-20 15:46:47 发布

休耕

最新推荐文章于 2024-08-20 15:46:47 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hqs2212586/article/details/99669829

本文介绍了如何使用Qiniu-JavaScript-SDK在JavaScript项目中实现文件上传到七牛云存储。内容包括SDK介绍、参考文档链接、NPM安装方法，以及在父组件中引入并使用上传组件的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Qiniu-JavaScript-SDK介绍

　　基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。
　　JS-SDK 兼容支持 H5 File API 的浏览器，在低版本浏览器下，需要额外的插件如 plupload，JS-SDK 提供了一些接口可以结合插件来进行上传工作。

　　Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考服务端 SDK 的文档。

1、参考文档

　　官方API文档：JavaScript SDK

　　基于七牛 API 开发的前端 JavaScript SDK 源码地址：https://github.com/qiniu/js-sdk

2、引入（NPM安装）

　　NPM 的全称是 Node Package Manager，是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。

$ npm install qiniu-js

二、javascript项目实现　　

　　创建七牛上传组件：hsedu_mgr/src/components/chart/QiniuUpload.vue

　　下面代码中集成了上传进度条，及上传完成提示

<template>
  <div class="ft-plant-upload-button" :class="boxClass">
    <Button class="upload-btn" type="ghost" icon="ios-cloud-upload-outline" :disabled="percent > 0 && percent < 100" @click="zh_uploadFile">{
   
   {qiniuUploadDesc}}</Button>
    <div class="progress-wraper" v-if="showProgress">
      <div class="progress" v-if="percent > 0 && percent < 100">
        <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="{width: percent+'%'}">
        </div>
      </div>
      <div class="precent" v-if="percent > 0 && percent < 100">
        {
    
    {percent || 0 }}%
      </div>
    </div>
    <div class="file-name" v-if="percent == 100">{
   
   {fileName}}</div>
    <input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
    <input type="hidden" :value="qiniuKey">
  </div>

</template>

<script>
  import * as qiniu from "qiniu-js"

  export default {
    name: "QiniuUpload",
    props: {   // 子组件的props选项
      qiniuUploadDesc: {
        type: String,
        default: '上传文件'
      },