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

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

流程： 生成token => token和图片作为new FromData() 参数 再上传

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_akS5TIpsXlkqHH2gy7Efk-ZaZeg4ZWtta';
const secretKey = 'X-MGLySWVrWFIQKTn87HWDIBvb3ni4Zm3qwZNKxk';
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

上传到七牛云

upload组件 ice Upload 上传组件

// 用来删除图片的
onUploadChange(info) {
        if (info.file.status == 'removed') {
            this.setState({
                fileList: [],
                values: Object.assign({
                    avatar: ''
                })
            })
        }
  }

<Col xxs="16" s="10" l="6">
                  <IceFormBinder name="avatar" required message="必填">
                    <ImageUpload
                      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)}
                    />
                  </IceFormBinder>
                </Col>

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

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