如何上传图片

前端如何上传图⽚到七⽜云

前端如何上传图⽚到七⽜云

流程：

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

2、后台⽣成七⽜云的token

3、前端利⽤elementUI/ice的upload组件

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

第⼀步后台⽣成七⽜云的token

token

constaccessKey='TSlScX_akS5TIpsXlkq*****7Efk-ZaZeg4ZWtta';

constcretKey='X-MGLySWVrWFIQKTn***WDIBvb3ni4Zm3qwZNKxk';

constbucket='deluntiyun';

如何获取这三个参数

accessKey就是AK

cretKey就是SK

bucket就是你的空间名字

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

⾮node的话⾃⾏查询

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

constaccessKey='TSlScX_akS5TIpsXl****gy7Efk-ZaZeg4ZWtta';

constcretKey='X-MGLySWVrWFI****87HWDIBvb3ni4Zm3qwZNKxk';

constbucket='deluntiyun';

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

letmac=(accessKey,cretKey);

letoptions={

scope:bucket,

expires:3600*24

};

letputPolicy=icy(options);

letuploadToken=Token(mac);

if(uploadToken){

=Code('re_success',uploadToken)

}el{

=Code('re_error')

}

})

token也是在前端来⽣成的，加载qiniu模块，利⽤其⽅法就可以⽣成token

第⼆步上传到七⽜云-React

upload组件iceUpload上传组件

//⽤来删除图⽚的

onUploadChange(info){

if(=='removed'){

te({

fileList:[],

values:({

avatar:''

})

})

}

}

listType="picture-card"

limit={1}

action={}

fileList={st}

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

data={oken}

locale={{

image:{

cancel:'取消上传',

addPhoto:'上传图⽚',

},

}}

formatter={(res)=>{

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

letimgURL=ath+"/"+;

te({

fileList:[{

status:"done",

downloadURL:imgURL,

fileURL:imgURL,

imgURL:imgURL

}],

value:(,{

avatar:imgURL

})

})

}}

onChange={(this)}

/>

附上⽹友⼤神的ice组件代码，虽然不是⽤七⽜云的

第⼆步上传到七⽜云-Vue

ui框架element-uiel-upload

koa2请求到七⽜云的token

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

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

('/api/admin/qiniu')

letconfig={

"AK":"TSlScX_akS5TIpsXlkqHH2gy7Efk-ZaZeg4ZWtta",

"SK":"X-MGLySWVrWFIQKTn87HWDIBvb3ni4Zm3qwZNKxk",

"Bucket":"mobile-phone-shell"

}

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

letmac=(,);

letcode='1',msg='',data={};

letoptions={

scope:,

expires:3600*24

};

letputPolicy=icy(options);

letuploadToken=Token(mac);

if(uploadToken){

code='0';

Token=uploadToken;

={code,data,msg}

}el{

={code,data,msg}

}

})

s=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"

list-type="picture-card"

:data='uploadData'

:on-success="handleAvatarSuccess"

:on-error="uploadError"

:before-upload="beforeAvatarUpload"

:on-preview="doLookImg"

:on-remove="doDeleteImg">