uniapp小程序上传图片到七牛云【复制粘贴】

七牛云sdk下载直通车

模板

   <loading v-if="loading">处理中</loading>
    <u-form-item label="上传" label-width="150">
    <view>
    <view v-show="showImage" class="imageWrap" style="display:inline-block;">
            <scroll-view scroll-x class="imageBox">
        <view class="image_item"  v-for="(i,o) in imglist" :key="o" @tap="viewImage(o)" :data- 
    url="imgList[o]">
        <image :src="qr(i)" mode="aspectFill" class="image_item">
            <view class="deletBox" @tap.stop="delImage" :data-index="o"><text>x</text></view>
        </image>
        </view>
         </scroll-view>
    </view>
    <image @tap="qupload" src="../../static/sc.png" class="up" mode="aspectFit"></image>
    </view>
    </u-form-item>

js

     export default {
        data() {
            return {
                form: {        
            imglist: '',            
        },
                loading: false,
                imglist:[],//七牛上传图片返回数据列表
            }
        }
        methods: {
            /* 上传图片到七牛云 复制即可用*/
            qupload() {
                // 选择图片
                uni.chooseImage({
                    count: 9,
                    success: (res) => {
                        this.loading = true;
                        this.testxxx(res.tempFilePaths)
                    }
                });
            },
            async testxxx(arr) {
                let _this = this;
                var len = arr.length;
                var suc = [];
                for(var i = 0; i < len; i++) {
                    /* 上传一次调用一次token和key */
                    var q = await this.req({
                        url: '/api/v1/x/qiniu',  
                        notLoading: true,
                    }).then(e => {
                        return e;
                    }).catch(e => {
                        return false;
                    });
                    await (() => {
                        return new Promise((a,b) => {
                            wx.uploadFile({
                              url: 'https://up-z2.qiniup.com', //空间对应的地区
                              filePath: arr[i],  //每张图片
                              name: 'file',
                              formData: {
                                key: q.data.key,
                                token: q.data.token,
                              },
                                success (res) {
                                console.log(res)
                                if(200 == res.statusCode){
                                    try{
                                       var dd = JSON.parse(res.data);
                                       suc.push(dd.key);
                                        a();
                                      }catch(e){
                                            b();
                                       }
                                    }
                                    b();                                    
                                },
                                error(res) {
                                    console.log('失败',res);
                                    b();
                                }
                            });
                        });
                    })().then(() => {
                        console.log(i + '张成功');
                    }).catch(() => {
                        console.log(i + '张失败');
                    })
                }
                console.log(suc);
                let imgstr  = suc.join('|');  //进行处理
                this.imglist = suc;  //七牛返回的图片数组
                this.form.imglist = imgstr;
                this.loading = false;
            },
            /* 上传结束 */
          }
    }

css

<style lang="scss">
    .imageBox {
    width: 100%;
    height: 140rpx;
    // line-height: 230rpx;
    // width: 100%;
    white-space: nowrap;
    display: inline-block;
    align-items: center;
    .image_item {
        display: inline-block;
        width: 160rpx;
        height: 140rpx;
        margin-right: 19rpx;
        position: relative;
        border-radius: 10rpx;
        .deletBox {
            width: 35rpx;
            height: 35rpx;
            line-height: 30rpx;
            text-align: center;
            border: 2rpx soild #333333;
            color: #ffffff;
            position: absolute;
            top: 6rpx;
            right: 6rpx;
            background-color: #ff0000;
            border-radius: 50px;
        }
    }
    }

    </style>
php服务器代码 (thinkphp5)
require 'qiniuyun/autoload.php';
    use Qiniu\Auth;
    use Qiniu\Storage\UploadManager;
    /**
     * 七牛图片文件上传
     * @desc 只能上传单个图片文
     * @return array token  返回七牛云上传凭证token
     * @return string key  返回生成token的key
     */
    public function qiniu() {
        $rs = array();
        $rs['key'] = md5(uniqid(microtime(true),true));//生成唯一字符串
         // 构建鉴权对象
        $uploader = new 
    Auth('AK','SK'); //七牛云官方个人中心秘钥获取
        // 生成上传 Token
        $rs['token'] = $uploader->uploadToken('nmb');
        return suc('data',$rs);
    }
最后修改:2021 年 04 月 24 日 03 : 00 PM
如果觉得我的文章对你有用,请随意赞赏