uni-app上传图片到七牛云上

uni-app使用uviewui框架,上传图片到七牛云上

  1. 前端上传图片需要后端返回的token,后端使用的egg.js,代码如下

    async getUploadToken() {
    const { accessKey, secretKey, bucket } = this.app.config.qiniu;
    const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    const options = {
      scope: bucket,
    };
    const putPolicy = new qiniu.rs.PutPolicy(options);
    const token = putPolicy.uploadToken(mac);
    this.ctx.body = { token };
    }

    配置文件

    config.qiniu = {
    accessKey: 'DV8DEhdrS4E*******', // 在七牛云中可以查看
    secretKey: 'F6kARBfXqd********',
    bucket: 'wrpicture',          // 七牛云中的存储空间
    };
  2. 前端代码
    使用uviewui中的u-upload,比较美观,但并没有使用它的上传方法,手动上传,监听一个按钮,点击上传,

    <view class="uploadImage">
        <u-upload ref="uUpload" :action="uploadUrl"  max-count="3" :file-list="images" :form-data="qiniuDataFrom" :auto-upload="false"></u-upload>
    </view>
submit() {
    const imageList = this.$refs.uUpload.lists; // 获取选择的图片信息
    for (let i = 0; i < imageList.length; i++) {
        // 一个一个上传
        uni.uploadFile({
            url: 'https://up-z1.qiniup.com',// 华北的地址,在七牛云中选择对应位置的网址
            filePath: imageList[i].file.path,
            name: 'file',
            formData: {
                token: this.uploadToken,
                key: 'uni-app/' + this.random(20),
            },
            complete: (res) => {
                if (res.statusCode === 200) {
                    const name = JSON.parse(res.data).key;
                    this.images[i] = 'https://picture.wrpxcx.com/' + name;
                }
            },
        })
    }
}

在fromData中将从后端拿到的token带上,key为文件名称,如果不带,七牛云会生成一个和hash值相同的文件,上传成功后,七牛云返回的结果为{hash, key}, key就是文件名称,通过域名加+key,就能访问到那张图片。

通过https://picture.wrpxcx.com/uni-app/Tr7iixCH3NQt5KGXBnzS ,就能访问到