vue 七牛云上传文件步骤及问题汇总

官方API文档：https://developer.qiniu.com/kodo/sdk/1283/javascript步骤：1、前台使用vue，后台传递一个 token。2、token ：这个相当于一个密钥。npm安装：npm install qiniu-js<template><div class="ft-plant-upload-b...

泡芙is

4803人浏览 · 2019-07-15 16:48:53

泡芙is · 2019-07-15 16:48:53 发布

官方API文档：https://developer.qiniu.com/kodo/sdk/1283/javascript
步骤：
1、前台使用vue，后台传递一个 token。
2、token ：这个相当于一个密钥。

npm安装：npm install qiniu-js

<template>
        <div class="ft-plant-upload-button">
          <Button type="ghost" icon="ios-cloud-upload-outline" @click="zh_uploadFile">选择文件</Button>
          <input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
        </div>
</template>


<script>
//七牛上传插件
import * as qiniu from 'qiniu-js';

export default {
  data(){
    return{
    }
  },
  methods: {
    //选择上传文件
    zh_uploadFile(){
      this.$refs.evfile.click();
    },
    //选择文件后触发的事件
    zh_uploadFile_change(evfile){
      //后端获取token
      getQiniuToken().then(res=>{
        var uptoken = res.data.data
        var file = evfile.target.files[0] //Blob 对象，上传的文件
        var key = file.name  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。

        let config = {
          useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: qiniu.region.z2     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };

        let putExtra = {
          fname: "",  //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(file, key, uptoken, putExtra, config);
        observable.subscribe({
          next: (result) => {
          // 主要用来展示进度
            console.log(result)
          },
          error: (errResult) => {
          // 失败报错信息
            console.log(errResult)
          },
          complete: (result) => {
          // 接收成功后返回的信息
            console.log(result)
          }
        })
      })
    },
  }
</script>

JQ单页面实现demo

<html>

<head>
    <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <input type='file' id='thisFile' /><br>
    <input type='button' value='upload' onclick="upload()">
    <br><br>
    <input type='text' value='upload progress' id='progress'>
</body>
<script>
    var observer = {
        next(res) {
            //  console.log(res.total.percent)
            $('#progress').val(res.total.percent);
        },
        error(err) {

        },
        complete(res) {
            alert('success')
        }
    }

    var config = {
        useCdnDomain: true,
        region: qiniu.region.z2
    };
    var file = undefined

    function bindToFile() {
        $('#thisFile').unbind('change').bind('change', function () {
            file = this.files[0]
        });

    }

    function upload() {
        //get file extension
        //TODO judge the extension
        //send the ajax request
        //you can deliever file extension through data
        var timestamp1 = Date.parse(new Date());
        var token =
            'hvfoFSl-iuE5A9-XrU7fHe-Q3RfGCNPK529oGxd-:t_5FIOO-UYD9C8B4a4VWM-6-OQE=:eyJzY29wZSI6InRlc3R1cGxvYWQiLCJkZWFkbGluZSI6MTU0ODc1NTkzN30=';
        var putExtra = {
            fname: file.name + timestamp1,
            params: {},
        };
        var observable = qiniu.upload(file, file.name + timestamp1, token, putExtra, config)
        var subscription = observable.subscribe(observer)



    }



    window.onload = bindToFile;
</script>

</html>

所参考的文献：
使用JS-SDK上传图片（文件）到七牛：
https://blog.csdn.net/zm06201118/article/details/80537558
Vue上传文件/图片到七牛云：
http://www.xdx97.com/#/single?bid=d83cde48-75e1-7ef7-8256-cea092850ef8
带你玩转七牛云存储——高级篇
https://m.imooc.com/article/37162
Vue2.0利用vue-resource上传文件到七牛
https://segmentfault.com/a/1190000008479698

遇到的问题：

1.运行提示o.upload.addEventListener is not a function
解决方案:(此方法不是根本解决办法，问题3的解决办法是最终解决方案)
找到node_modules/mockjs/dist/mock.js 第8308行
找到node_modules/mockjs/src/xhr/xhr.js 第216行(确保在生产模式下打包出来的代码正常使用。)
添加代码： MockXMLHttpRequest.prototype.upload = xhr.upload;
参考文章：https://github.com/nuysoft/Mock/issues/127

2.上传文件链接返回提示 no such bucket
这是后端给你的token有问题，让后端去设置一下正确的bucket再生成token给你
参考文章：https://developer.qiniu.com/kodo/sdk/1239/java

3.上传文件过程报错cannot read property 'total' of null（文件能传成功，无法获取执行回调）
这是由于vue-cli中的mockjs模块全局使用了MockXMLHttpRequest，而七牛sdk本身使用的是XMLHttpRequest按照标准来的，但是vue-cli中的mockjs模块硬是把XMLHttpRequest自己封装一下导致冲突，会导致对象属性访问不到，删除mockjs模块即可。
解决方法：npm uninstall mockjs 删除该模块依赖
参考文章:https://github.com/nuysoft/Mock/issues/301

作者：追寻1979
链接：https://www.jianshu.com/p/b28fbab95b5a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^