1.前臺(tái)頁(yè)面

1.1wxml問(wèn)阿金

<!-- 說(shuō)明一個(gè)上傳頁(yè)面的按鈕 -->
<button type="primary" bindtap="uploadPage">上傳頁(yè)面展示</button>
<!-- 聲明一個(gè)上傳服務(wù)器的按鈕 -->
<button type="warn" bindtap="uploadSever">上傳服務(wù)器</button>
<!-- 實(shí)現(xiàn)點(diǎn)擊圖片有個(gè)預(yù)覽效果  -->
<view wx:for="{{imgSrcArr}}" bindtap="uploadPreview" wx:key="index" class="img">
<!-- 動(dòng)態(tài)展示圖片 -->
<image class="pic" src="{{item.tempFilePath}}" />
<!-- 刪除圖片 -->
<!-- catchtap并阻止其冒泡到父元素,因?yàn)楦冈赜衭pdatePreview時(shí)間 -->
<view class="delete-button" catchtap="deleteImage" data-index="{{index}}">刪除</view>
</view>

展示

?

?

1.2js文件

1.2.1 uploadPage

說(shuō)明：調(diào)用方法就是屬性值是一個(gè)函數(shù)，因此要注意this問(wèn)題。要將this指向原來(lái)的位置。

  uploadPage() {
    // 改變this,特別是調(diào)用方法
    // 說(shuō)明：調(diào)用方法就是屬性值是一個(gè)函數(shù)，因此要注意this問(wèn)題
    let that = this
    wx.chooseMedia({
      count: 9, //表示可以選擇的最大圖片數(shù)量限制，這里設(shè)置為 9 表示最多可以選擇 9 張圖片
      mediaType: ['image'], //表示媒體文件的類型，在這里設(shè)置為 ['image'] 表示只能選擇圖片類型的文件
      sourceType: ['album', 'camera'], //表示可以選擇的媒體來(lái)源，這里設(shè)置為 ['album', 'camera'] 表示可以從相冊(cè)或相機(jī)進(jìn)行選擇
      camera: 'back', //表示前后攝像頭的選擇，默認(rèn)為后置攝像頭。當(dāng)然設(shè)置的就是后置攝像頭
      success(res) {
        that.setData({
          // 可以上傳多張圖，通過(guò)es6解構(gòu)數(shù)組的方式
          imgSrcArr: [...that.data.imgSrcArr, ...res.tempFiles]
        })
      }
    })
  },

展示?

說(shuō)明：點(diǎn)擊上傳頁(yè)面展示，在這里我點(diǎn)擊了兩次?！

?

1.2.2uploadPreview

說(shuō)明：需要學(xué)習(xí)Array.map方法的使用。

  // 圖片預(yù)覽
  uploadPreview() {
    let that = this
    wx.previewImage({
      current: "", // 當(dāng)前顯示圖片的http鏈接
      // 說(shuō)明map方法就是遍歷數(shù)字然后生成一個(gè)新的數(shù)組，item就是遍歷的數(shù)組里面的對(duì)象，返回tempFilePath
      urls: that.data.imgSrcArr.map(item => item.tempFilePath)
       // 需要預(yù)覽的圖片http鏈接列表，[url,url]這樣的
    })
  },

?展示

說(shuō)明：點(diǎn)擊圖片后全屏顯示?

1.2.3deleteImage按鈕

說(shuō)明：點(diǎn)擊刪除按鈕刪除圖片

  // 刪除圖片
  deleteImage(event) {
    // 解構(gòu)拿到數(shù)組的索引
    const {
      index
    } = event.currentTarget.dataset;
    // 拿到圖片數(shù)組
    const {
      imgSrcArr
    } = this.data;
    // 刪除當(dāng)前索引，刪除長(zhǎng)度為1
    imgSrcArr.splice(index, 1);

    this.setData({
      imgSrcArr: imgSrcArr
    });
  },

sass文件

// 圖片
.img {
  position: relative;

  .pic {}
// 圖片里面的按鈕
  .delete-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    font-size: 15px;
    color: #ffffff;
    background-color: #BDA066;
    border-radius: 5px;
  }
}

??

說(shuō)明：如果不寫catchtap="deleteImage"，因?yàn)槭录芭莸搅烁冈兀|發(fā)了uploadPreview事件。

1.2.4 上傳圖片到服務(wù)器

說(shuō)明：使用原生的上傳圖片目前我只能一張一張上傳，因此我是采用了map方法使用，遍歷數(shù)組每個(gè)值，進(jìn)行上傳。

  uploadSever() {
    let that = this
//拿到圖片的url地址，map使用
    that.data.imgSrcArr.map(item => {
      wx.uploadFile({
        url: '***********', //服務(wù)器地址
      //圖片的地址
        filePath: item.tempFilePath,
        // 前臺(tái)必須傳遞image，后臺(tái)規(guī)定的字段。
        name: 'image',
        success(res) {
          console.log(res);
        }
      })
    })
  },

?展示，圖片存在云數(shù)據(jù)庫(kù)的位置

?2.后端邏輯

說(shuō)明：為了自己能夠看，不再闡釋說(shuō)明。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-735406.html

import cloud from '@lafjs/cloud'
import { S3, PutObjectCommand } from "@aws-sdk/client-s3";
import fs from 'fs'

const s3 = new S3({
  endpoint: cloud.env.OSS_EXTERNAL_ENDPOINT,
  region: cloud.env.OSS_REGION,
  credentials: {
    accessKeyId: cloud.env.OSS_ACCESS_KEY,
    secretAccessKey: cloud.env.OSS_ACCESS_SECRET,
  },
  forcePathStyle: true,
});
// 正文開(kāi)始，這才是內(nèi)容
export async function main(ctx: FunctionContext) {

  const image = ctx.files[0]

  // 判斷前臺(tái)上傳的圖片是否包含 images 字段
  if (image.fieldname !== "image") {
    // 如果不存在 images 字段，則返回錯(cuò)誤信息
    return {
      statusCode: 400,
      body: JSON.stringify({
        error: 'Missing images field in the request.'
      })
    };
  }
  // 將圖片的臨時(shí)位置讀取了
  const fileContent = fs.readFileSync(image.path); // 能夠上傳成功，展示圖片是花的

  const bucket = "”************************"; // 這里改成你要上傳的云儲(chǔ)存名稱

  // 文件的路徑，存儲(chǔ)位置就是images文件夾
  const path = "/images/" + image.filename

  const command = new PutObjectCommand({
    // 儲(chǔ)存桶的位置
    Bucket: bucket,
    // 文件的路徑
    Key: path,
    Body: fileContent,
    ContentType: image.mimetype,
  });

  let res
  try {
    res = await s3.send(command)
    // console.log("文件上傳成功：", res);
  } catch (error) {
    return error
  }
  let { $metadata: { httpStatusCode } } = res
  let { filename } = ctx.files[0]
  let fileObject = { httpStatusCode, filename }
  return fileObject
}

到了這里，關(guān)于微信小程序原生上傳圖片和預(yù)覽+云函數(shù)上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！