小程序开发笔记（六）--使用七牛云上传图片

选取相册及本地预览

1. 选择手机相册

preUpload() {
      let that = this;
      // let imglist=[];
      wx.chooseImage({
        count: 9, //最多可以选择的图片张数
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          console.log("res", res);
          // tempFilePath可以作为img标签的src属性显示图片
          // that.tempFilePaths = res.tempFilePaths;
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            if (that.tempFilePaths.length < 9) {
              that.tempFilePaths.push(res.tempFilePaths[i]);
            }
          }
        }
      });
    },

2. 显示照片列表

<ul class="photos">
      <li class="photo" v-for="(item,index) in tempFilePaths" :key="index">
        <img class="photo-pic" :src="item" alt @click="previewImg(item)">
        <img class="photo-delete" src="/static/icon/icon_delete.png" @click="deletePhoto(index)">
      </li>
      <li class="photo upload-btn" @click="preUpload" v-if="tempFilePaths.length<9">上传</li>
    </ul>

3. 照片本地预览

previewImg(item) {
      wx.previewImage({
        urls: this.tempFilePaths,
        current: item
      });
    }

使用七牛云图片上传

七牛云提供了微信小程序sdk版本

1. 下载七牛云微信小程序sdk
   https://developer.qiniu.com/sdk#community-sdk

2. 下载之后我们将qiniuUploader.js文件放置在static/lib目录下

3. 在vue文件中引入

import qiniuUploader from "../../../../../static/lib/qiniuUploader";

4. 上传图片到七牛云

doPreAdd() {
      if(this.tempFilePaths.length<=0){
        this.doSave();
        return;
      }
      // 先上传图片 -》发布动态并保存图片地址
      let that = this;
      // let imgList = [];
      let count = 0; //count记录当前已经上传到第几张图片
      // 上传多张
      for (let i = 0; i < this.tempFilePaths.length; i++) {
        qiniuUploader.upload(
          this.tempFilePaths[i],
          res => {
            count++;
            that.imgList.push(res.imageURL);
            if (count == that.tempFilePaths.length) {
              //全部上传完成  调用保存接口
              that.doSave();
            }
          },
          error => {
            console.error("error: " + JSON.stringify(error));
            that.log = "error: " + JSON.stringify(error);
          },
          {
            key:`www/${new Date().getFullYear()}/${new Date().getMonth()+1}/${new Date().getDate()}/${new Date().getTime()}.jpg`,//设置文件名
            region: "ECN", // NCN华北区    ECN华东区
            uptokenURL: api.getQiniuToken(),
            domain: "http://xxx.xxx.cn",
            shouldUseQiniuFileName: false
            // key: 'testKeyNameLSAKDKASJDHKAS'
            // uptokenURL: 'myServer.com/api/uptoken'
          },
          // null, // 可以使用上述参数，或者使用 null 作为参数占位符
          progress => {
            console.log("上传进度", progress.progress);
            console.log("已经上传的数据长度", progress.totalBytesSent);
            console.log(
              "预期需要上传的数据总长度",
              progress.totalBytesExpectedToSend
            );
            that.log = "上传进度" + progress.progress;
          },
          cancelTask => {
            // that.setData({ cancelTask });
            this.cancelTask = cancelTask;
          }
        );
      }
    },