环境:vue.js + tp5(获取token) + 七牛云
七牛云sdk: https://developer.qiniu.com/kodo/sdk/1283/javascript
思想: 通过js直接提交图片到七牛云,获取返回地址。期间会在服务器获取七牛云token。
vue.js 需要按照七牛云js
npm install qiniu-js
var qiniu = require('qiniu-js')
vue.js代码如下
<template>
<div>
<div class="weui-gallery" v-bind:class="{showgallery: showgallery}">
<span class="weui-gallery__img" @click="closeGallery" :style="{backgroundImage:'url('+galleryimgUrl+')'}"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del" @click="delGallery">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<div class="weui-cell">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">{{uploadNum}}/{{allUploadNum}}</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li
v-for="(item,index) in imgList"
:key ="index"
:style="{backgroundImage:'url('+item.imgUrl+')'}"
@click="openGallery(index)"
class="weui-uploader__file weui-uploader__file_status"
>
<div class="weui-uploader__file-content">
<i :class="[item.uploadimg == 0 ? 'weui-loading' : (item.flag == 1 ? 'weui-icon-success' : 'weui-icon-warn')]"></i>
</div>
</li>
<!-- <li class="weui-uploader__file weui-uploader__file_status">
<div class="weui-uploader__file-content">
<div class="weui-loading"></div>
</div>
</li> -->
</ul>
<div class="weui-uploader__input-box" v-show="showUploadBtn">
<input id="uploaderInput" class="weui-uploader__input" v-on:change="newFileChange" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
<div @click="getImgList">点击查看imgList的值</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "TestContent",
data (){
return {
//所有图片列表
imgList: [
// { imgUrl: 'http://api.99314.com/static/images/pic_160.png', flag: 1},
// { imgUrl: 'http://hfyd.yihuizhuang.com/uploads/allimg/180925/1-1P925160340.jpg', flag: 0},
// { imgUrl: 'http://hfyd.yihuizhuang.com/uploads/allimg/180925/1-1P925160340-50.jpg', flag: 1}
],
//是否显示 gallery
showgallery: false,
//gallery当前的图片地址
galleryimgUrl: '',
//当前点击的图片地址索引
currentImgIndex: -1,
//一共可以上传多少张图片
allUploadNum: 5,
//已经上传的图片数量
uploadNum: 0,
//是否显示上传按钮,当大于最大上传数量的时候,隐藏,否则显示
showUploadBtn: true
}
},
watch : {
imgList: function(){
this.uploadNum = this.imgList.length
if(this.imgList.length > this.allUploadNum){
this.imgList = this.imgList.slice(0, this.allUploadNum)
this.$weui.toast('只能添加'+ this.allUploadNum +'张图片')
}
//当图片达到允许最大上传值 等于大于的时候,则隐藏
if(this.imgList.length >= this.allUploadNum){
this.showUploadBtn = false
}else{
this.showUploadBtn = true
}
}
},
methods: {
getImgList (){
console.log(this.imgList)
},
// 添加了图片之后触发的事件,js直接提交
newFileChange (res){
// console.log(res.target.files[0].name)
// 拿到 files(数组),然后提交到后端,完成之后,把新的图片加到 imgList中去
//如果获取的文件数组长度小于1,说明没有获取到,直接结束
// 遍历数据 res.target.files, 然后挨个去上传
const files = res.target.files
// 这里要注意,如果选择的图片加上已经存在的图片数量大于最大上传的数量,只能上传最大数量,然后提示打到达最大的数量
let nowUploadNum = files.length + this.imgList.length
if(nowUploadNum > this.allUploadNum){
// 如果已经存在的数量加上上传的数量大于 最大上传数量, 则上传 最大上传数量 - 实际存在的数量
let trueUplaodNum = this.allUploadNum - this.imgList.length
if(trueUplaodNum > 0){
// 如果实际上传数量大于0, 说明还需上传
this.newUploadQiniu(trueUplaodNum, files)
}else{
// 如果实际上传数量 不大于 0, 说明已经是最大上传数量,不上传,直接提示 已经是最大数量
this.$weui.alert('最大只能上传' + this.allUploadNum + '张')
}
}else{
//如果现在要上传的数量加上一句存在的图片数量 小于 最大上传数量,则直接上传
this.newUploadQiniu(files.length, files)
}
},
newUploadQiniu (uploadNum, files){
//如果文件长度小于1,表示没有文件,则不上传
if(files.length < 1){
return
}
for (let i = 0; i < uploadNum; i++) {
// 将突破都先用blog方式传到前端
let src, url = window.URL || window.webkitURL || window.mozURL
if (url) {
src = url.createObjectURL(files[i])
}
//用来控制每一次点击之后,让程序知道是哪一张图片在上传
var uploadid = this.imgList.length
this.imgList.push({imgUrl: src, flag: 0, uploadimg: 0, uploadid: uploadid})
//获取七牛云token
let postData = {
'name' : files[i].name,
'uploadid' : uploadid
}
const qs = require('qs')
const that = this
axios.post(this.common.HTTPHOST+"/api/qiniu/getToken", qs.stringify(postData), {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(res){
let retData = res.data
if(retData.ret == 1){
//获取成功
let token = retData.data.token
let uploadid = retData.data.uploadid
let file = files[i]
let key = retData.data.name
const qiniu = require('qiniu-js')
const config = {
useCdnDomain: true,
region: null
}
const putExtra = {
fname: "",
params: {},
mimeType: null
}
const observer = {
next(res){
// ... 进度函数
},
error(err){
// ...上传错误时
//上传失败, 将本地的图片显示在图片预览中
that.imgList[uploadid].uploadimg = 1 //完成上传
that.imgList[uploadid].flag = 0 //上传失败
},
complete(res){
// ...上传成功改变 这一条的状态
that.imgList[uploadid].uploadimg = 1 //完成上传
that.imgList[uploadid].flag = 1 //上传成功
that.imgList[uploadid].trueUrl = that.common.IMGHOST + '/' + res.key
}
}
var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer)
// subscription.unsubscribe() // 上传取消
}else{
//获取失败
that.imgList[uploadid].uploadimg = 1 //完成上传
that.imgList[uploadid].flag = 0 //上传失败
that.$weui.alert('网络错误')
}
}).catch(function(err){
console.log(err)
})
}
},
//打开 gallery
openGallery (index){
this.currentImgIndex = index
this.galleryimgUrl = this.imgList[index]['imgUrl']
this.showgallery = true
},
//删除gallery
delGallery (){
const that = this
if(this.currentImgIndex > -1){
//如果当前索引大于0,说明存在
this.imgList.splice(this.currentImgIndex, 1)
this.currentImgIndex = -1
}
that.$weui.toast('操作成功', {
duration: 1000,
callback: function(){
that.showgallery = false
}
});
},
//关闭gllery
closeGallery (){
this.showgallery = false
}
}
}
</script>
<style lang="stylus" scoped>
.showgallery
display: block
// >>>.weui-uploader__file_status:before
// background: none
// >>>.weui-uploader__file-content
// top: 15px
// left: 80%
</style>
tp5后台代码: 七牛云配置详见 之前笔记
use Qiniu\Auth;
//require 'vendor/qiniu/php-sdk/autoload.php'; //引入自动加载类
vendor('qiniu.php-sdk.autoload');
use Qiniu\Storage\UploadManager;
//获取token
public function getToken()
{
// 获取 post.name, 对name进行,自定义命名
$name = $this->setNewName(input('post.name'));
$uploadid = input('post.uploadid');
// 构建鉴权对象
$accessKey = config("qiniu")["accessKey"];
$secretKey = config("qiniu")["secretKey"];
$auth = new Auth($accessKey, $secretKey);
// 要上传的空间
$bucket = config("qiniu")["bucket"];
// 生成上传Token
$token = $auth->uploadToken($bucket);
if ($token) {
show(1, '获取成功', array('token' => $token, 'name' => $name, 'uploadid' => $uploadid));
} else {
show(0, '获取失败');
}
}
//对名称进行自定义
public function setNewName($str)
{
// $str abd.jpg
// 1. 获取.前面的字符
$lastShowNum = strrpos($str, '.');
$qian_str = substr($str, 0, $lastShowNum);
$last_str = substr($str, $lastShowNum + 1, strlen($str));
$newName = substr(md5('zqimg'), 0, 5) . date('YmdHis') . rand(0, 9999) . '.' . $last_str;
return $newName;
}