快捷導(dǎo)航

微信小程序上傳圖片到別的域名文件下的示例代碼

更新時間：2023年12月13日 11:12:28 作者：雯0609~

這篇文章主要介紹了微信小程序上傳圖片到別的域名文件下的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

效果

wxml

<!-- 上傳照片 -->
<view class="addbtn">
  <view class='pic' name="fault_photo" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
    <image class='weui-uploader_img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
      <image src='{{clear}}' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></image>
    </image>
  </view>
  <view class="addphoto" bindtap="add_photo">
    <image src="{{add}}" class="addtext">+</image>
  </view>
</view>
<button bindtap="sumbit">提交</button>

wxss

/* 上傳照片樣式 */
.line3 {
  padding-top: 8%;
  background-color: white;
  width: 100%;
  padding-bottom: 4%;
  /* border: 1px solid black; */
}
.addbtn {
  padding-top: 5%;
  margin-left: 2%;
  padding-bottom: 5%;
  /* border: 1px solid black; */
}
.pic {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  /* border: 1px solid black;  */
}
.weui-uploader_img {
  /* border: 1px solid black; */
  width: 150rpx;
  height: 150rpx;
}
.delete-btn {
  position: absolute;
  top: -14rpx;
  right: -14rpx;
  width: 20px;
  height: 20px;
  z-index: 9999;
}
.addphoto {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #F6F6F6; */
  border: 1px dashed #C6C6C6;
}
.addtext {
  /* border: 1px solid black; */
  /* font-size: 50px; */
  width: 80rpx;
  height: 80rpx;
  color: #BFC1C2;
}

js

const app = getApp()
Page({
  data: {
    //上傳照片圖片
    clear: app.globalData.icon + 'photo/clear.png',
    add: app.globalData.icon + 'photo/photo.png',
    imgs: [],
    allphoto: [],
  },
  //上傳圖片
  add_photo(e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({ //圖片相機(jī)的選擇chooseMedia
      // count: 1, // 默認(rèn)9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        // console.log('返回圖片路徑信息', res.tempFilePaths)
        var imgs = that.data.imgs;
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        that.setData({
          imgs: imgs
        });
        console.log('圖片合集', that.data.imgs);
      }
    });
  },
  // 刪除圖片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
    // console.log('上傳圖片合集', this.data.imgs);
  },
  // 預(yù)覽圖片
  previewImg: function (e) {
    //獲取當(dāng)前圖片的下標(biāo)
    var index = e.currentTarget.dataset.index;
    //所有圖片
    var imgs = this.data.imgs;
    wx.previewImage({
      //當(dāng)前顯示圖片
      current: imgs[index],
      //所有圖片
      urls: imgs
    })
  },
  sumbit(){
    console.log(this.data.imgs)
    //先執(zhí)行圖片上傳
    let imgs = this.data.imgs
    // console.log(this.data.imgs)
    for (var i = 0; i < this.data.imgs.length; i++) {
      var that = this
      wx.uploadFile({
        //別的域名文件
        url: 'https://域名/api/api_wxmini.php',
        filePath: imgs[i],
        name: "file",
        header: {
          "content-type": "multipart/form-data"
        },
        success: function (res) {
          if (res.statusCode == 200) {
            wx.showToast({
              title: "上傳成功",
              icon: "none",
              duration: 1500
            })
            console.log(res.data)
            that.data.allphoto.push(res.data) //向數(shù)組末端插入數(shù)據(jù)
          }
        },
        fail: function (err) {
          wx.showToast({
            title: "上傳失敗",
            icon: "none",
            duration: 2000
          })
        },
      })
    }
  }
})

php

別的文件路徑

圖片路徑

代碼

<?php
    $file = $_FILES['file']; //獲取小程序傳來的圖片
    $imgdirs = "../update_img/";//文件夾名稱(/upload/update_img/)
    mkdirs($imgdirs);//創(chuàng)建$imgdirs文件夾
    //獲取圖片文件的名字
    $fileName = $_FILES["file"]["name"];
    // //獲取圖片類型
    $file_type = $_FILES["file"]["type"];
    $type = '';
    //判斷是否是圖片
    switch ($file_type) {
    case 'image/png':
        $type = '.png';
        break;
    case 'image/gif':
        $type = '.gif';
        break;
    case 'image/jpeg':
        $type = '.jpg';
        break;
    }
    //圖片保存的路徑
    $savepath = $imgdirs.$fileName; //upload/update_img/文件名
    // 臨時文件移動到指定文件夾
    $rs = move_uploaded_file($_FILES["file"]["tmp_name"],$savepath);
    //成功上傳文件
    if($rs) {
        $url = 'SO/'.$fileName;
        echo json_encode($url, JSON_UNESCAPED_SLASHES);
        } 
    else {
        $result=array('errno'=>1,'message'=>'失敗信息');
        echo json_encode($result);
    }
    //創(chuàng)建文件夾 權(quán)限問題
    function mkdirs($dir, $mode = 0777){
        if (is_dir($dir) || @mkdir($dir, $mode)) return TRUE;
        if (!mkdirs(dirname($dir), $mode)) return FALSE;
        return @mkdir($dir, $mode);
    }
?>

微信公眾平臺

上添加需要訪問的域名