【Vue图片、视频文件上传七牛云】

  1. 下载qiniu 后页面引入 import * as qiniu from “qiniu-js”
  2. 用element的up-load或者其他获取到要上传的file文件
  3. 使用qiniu.upload上传文件

首先要获取七牛token

let UserQin: any = {}
 nextTick(() => {
   mixin.methods.edit(getqiniu.add).then((res) => {
    UserQin = res;
   });
 });
 
 定义上传配置
 const config = {
 useCdnDomain: true,
 region: qiniu.region.z2, // 根据地区不同,官网有不同的配置
 concurrentRequestLimit: 1000, // 并发请求个数
 };

进行上传

    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
  const key = "uploads/video/" + year + month + day + "/" + rawFile.name;  
  const observable = qiniu.upload(
     rawFile,//文件
     key, //文件名
     UserQin.token,
     config //上传配置
    );
 	observable.subscribe({
        next(res) {},
        error(err) {},
        complete(res) {
        //上传成功之后把路径返回给后端
          mixin.methods
            .edit(getqiniu.edit, {
              url: UserQin.domain + "/" + key,
              name: rawFile.name, //文件名
            })
            .then((res) => {
              emit("success", res);
              handleSuccess(res, rawFile, fileList.value);
            });
        },
      });      

你可能感兴趣的:(vue.js,javascript,ecmascript)