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

最新推荐文章于 2023-08-04 11:24:04 发布

angyangan9569

最新推荐文章于 2023-08-04 11:24:04 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/fozero/p/10928551.html

本文介绍如何在微信小程序中实现从手机相册选择图片并进行本地预览的功能，同时详细展示了使用七牛云SDK上传图片至云端的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选取相册及本地预览

选择手机相册

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]);
            }
          }
        }
      });
    },

显示照片列表

<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>

照片本地预览

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

使用七牛云图片上传

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

下载七牛云微信小程序sdk
https://developer.qiniu.com/sdk#community-sdk
下载之后我们将qiniuUploader.js文件放置在static/lib目录下
在vue文件中引入

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

上传图片到七牛云

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;
          }
        );
      }
    },

转载于:https://www.cnblogs.com/fozero/p/10928551.html