七牛上传图片html,前端如何上传图片到七牛云

前端如何上传图片到七牛云

流程：

1、七牛云后台的对象存储功能

2、node.js后台生成七牛云的token

3、前端利用element UI/ice 的upload组件

4、文件名和token作为参数请求到七牛云后台

第一步 node.js后台生成七牛云的token

token

const accessKey = 'TSlScX_akS5TIpsXlkq*****7Efk-ZaZeg4ZWtta';

const secretKey = 'X-MGLySWVrWFIQKTn***WDIBvb3ni4Zm3qwZNKxk';

const bucket = 'deluntiyun';

如何获取这三个参数

image.png

accessKey 就是AK

secretKey 就是SK

image.png

bucket 就是你的空间名字

我的token是koa后台请求回来的，附上代码 node的话qiniu模块

非node的话自行查询Node.js SDK

let qiniu = require('qiniu'); // 需要加载qiniu模块的

const accessKey = 'TSlScX_akS5TIpsXl****gy7Efk-ZaZeg4ZWtta';

const secretKey = 'X-MGLySWVrWFI****87HWDIBvb3ni4Zm3qwZNKxk';

const bucket = 'deluntiyun';

router.post('/token', async(ctx, next)=> {

let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);

let options = {

scope: bucket,

expires: 3600 * 24

};

let putPolicy = new qiniu.rs.PutPolicy(options);

let uploadToken= putPolicy.uploadToken(mac);

if (uploadToken) {

ctx.body = Code('re_success', uploadToken)

} else {

ctx.body = Code('re_error')

}

})

token也是在前端来生成的， 加载qiniu模块，利用其方法就可以生成token

第二步 上传到七牛云 - React

upload组件 ice Upload 上传组件

// 用来删除图片的

onUploadChange(info) {

if (info.file.status == 'removed') {

this.setState({

fileList: [],

values: Object.assign({

avatar: ''

})

})

}

}

listType="picture-card"

limit={1}

action={this.state.qiniu.url}

fileList={this.state.fileList}

accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"

data={this.state.qiniuToken}

locale={{

image: {

cancel: '取消上传',

addPhoto: '上传图片',

},

}}

formatter={(res)=>{

// 七牛云返回的数据 { hash:"FjIEDVNzhgmsU7cOBtkAXV7VuhvJ"，key:"FjIEDVNzhgmsU7cOBtkAXV7VuhvJ"}

let imgURL = this.state.qiniu.qiniuPath + "/" + res.key;

this.setState({

fileList: [{

status: "done",

downloadURL: imgURL,

fileURL: imgURL,

imgURL: imgURL

}],

value: Object.assign(this.state.value, {

avatar: imgURL

})

})

}}

onChange= {this.onUploadChange.bind(this)}

/>

附上网友大神的ice组件代码，虽然不是用七牛云的

52A911F6-D3A8-4cb0-A041-202644CCA761.png

第二步 上传到七牛云 - Vue

ui框架 element-ui el-upload

koa2 请求到七牛云的token

let qiniu = require('qiniu'); // 需要加载qiniu模块的

const router = require('koa-router')()

router.prefix('/api/admin/qiniu')

let config = {

"AK":"TSlScX_akS5TIpsXlkqHH2gy7Efk-ZaZeg4ZWtta",

"SK":"X-MGLySWVrWFIQKTn87HWDIBvb3ni4Zm3qwZNKxk",

"Bucket":"mobile-phone-shell"

}

router.post('/token', async(ctx, next)=> {

let mac = new qiniu.auth.digest.Mac(config.AK, config.SK);

let code = '1',msg = '', data = {};

let options = {

scope: config.Bucket,

expires: 3600 * 24

};

let putPolicy = new qiniu.rs.PutPolicy(options);

let uploadToken= putPolicy.uploadToken(mac);

if (uploadToken) {

code = '0';

data.uploadToken = uploadToken;

ctx.body = {code, data, msg}

} else {

ctx.body = {code, data, msg}

}

})

module.exports = router

前端代码

style='position: relative;top: 10px;height: 120px;'

:file-list='fileList'

class="avatar-uploader"

:limit='1'

:action="uploadUrl"

accept="image/jpeg,image/gif,image/png,image/bmp"

list-type="picture-card"

:data='uploadData'

:on-success="handleAvatarSuccess"

:on-error="uploadError"

:before-upload="beforeAvatarUpload"

:on-preview="doLookImg"

:on-remove="doDeleteImg">

export default {

data() {

return {

uploadUrl: 'http://up-z0.qiniu.com',

uploadData: {key:'',token:''},

formAdd: { brandLogo: '' }

}

},

mounted() {

getQiniuToken({}).then((res)=> {

console.log(res);

if (res.code === '0') {

this.uploadData.token = res.data.uploadToken

}

})

},

methods: {

doDeleteImg(file, fileList) {

console.log('删除成功',file, fileList)

let logoAry;

let key;

if (this.editState) {

logoAry = this.mainInfo.brandLogo.split('/');

} else {

logoAry = this.formAdd.brandLogo.split('/');

}

key = logoAry[logoAry.length - 1];

deleteQiniuImg({key}).then(res=> {

if (res.code === '0') {

if (this.editState) {

this.mainInfo.brandLogo = '';

} else {

this.formAdd.brandLogo = '';

}

} else {

this.$message.error(res.msg)

}

})

},

doLookImg() {

this.uploadDialogVisible = true;

this.uploadDialogImg = this.editState ? this.mainInfo.brandLogo : this.formAdd.brandLogo;

},

handleAvatarSuccess(res, file, fileList) {

console.log('上传成功', res,file, fileList)

let hash = res.hash;

let key = res.key;

if (this.editState) {

this.mainInfo.brandLogo = qiniuConfig.qiniuPath + '/' + key;

} else {

this.formAdd.brandLogo = qiniuConfig.qiniuPath + '/' + key;

}

},

beforeAvatarUpload(file) {

console.log(file, 'beforeAvatarUpload')

// var observable = qiniu.upload(file, key, token, putExtra, config)

const isPNG = file.type === "image/png";

const isJPEG = file.type === "image/jpeg";

const isJPG = file.type === "image/jpg";

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isPNG && !isJPEG && !isJPG) {

this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");

return false;

}

if (!isLt2M) {

this.$message.error("上传头像图片大小不能超过 2MB!");

return false;

}

this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;

},

uploadError(err, file, fileList) {

this.$message({

message: "上传出错，请重试！",

type: "error",

center: true

});

},

}

}