对七牛上传云服务的理解

1.发布前准备

qshell_windows64 account vLHbgaYj8mfvPUTpMCYLbAetXh-Cg0Fk0R_FtAN_ re1EvlR0FwlSv9YEYlJsHw_WRIcshxhbxilGvmRN

<el-form-item label="款式图">
	<el-upload class="image-uploader"
	action="https://up.qbox.me"
	:show-file-list="false"
	:data="uploadForm"
	:on-success="uploadSuccess"
	:on-error="uploadFail"
	:before-upload="beforeUpload">
	<div v-if="addForm.defaultimg">
	   <img :src="addForm.defaultimg" class="upload-image">
	    <i v-if="uploading" class="el-icon-loading image-uploading-icon"></i>
	</div>
	<i v-else class="el-icon-plus image-uploader-icon"></i>
	</el-upload>
</el-form-item>

前端HTML代码

before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

action：必选参数，上传的地址

show-file-list: 是否显示已上传文件列表

data: 上传时附带的额外参数

on-success：文件上传成功时的钩子

2.前端js代码

coverBeforeUpload: function(file) { //上传之前所做的准备
      var key = api.1xxxx; //接口返回
      return api.2xxxxx().then(response => {
        var token = response.upToken;
        this.coverUploadForm = { key: key, token: token }; //先定义好
      });
    },

coverUploadSuccess(response, file, fileList) { //上传成功的操作
      if (response.key) {
        var imageURL = "http://xx.xxxxxx.xxx/" + response.key; //自己服务器地址
        var form = this.addForm;
        form.defaultimg = imageURL;
        this.addForm = form;
      }
    }

3.JavaScript SDK

上传：大于4M时可分块上传，小鱼4M时直传，分块上传时，支持断点续传

准备： 1.在使用js-sdk之前，必须先注册一个七牛账号，并登录控制台获取一对有效的AccessKey和SecretKey

2.js-sdk依赖服务端颁发的token，a，利用七牛服务端sdk构建的后端服务（目前用的）。b，利用七牛底层API构建服务

数据处理（图片）

1. imageView2(缩略图) 2.imageMogr2(高级处理，包含缩放，裁剪，旋转等)

3.imageInfo（获取基本信息）4.exif（获取图片EXIF信息）5.watermark(文字、图片水印)

6.pipeline(管道，可对imageView2，imageMogr2，watermark进行链式处理)

引入方式：

1.直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js

2.使用NPM安装 npm install qiniu-js

var qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

上传：

var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer) // 上传开始
// or
var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消

对七牛上传云服务的理解

猜你喜欢