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() // 上传取消