一、實(shí)現(xiàn)原理
- wx.showActionSheet()：顯示操作菜單，選擇是從相冊(cè)選擇還是相機(jī)拍攝照片
- wx.chooseImage()：從本地相冊(cè)選擇圖片或使用相機(jī)拍照。
- wx.uploadFile()：將本地資源上傳到服務(wù)器?？蛻舳税l(fā)起一個(gè) HTTPS POST 請(qǐng)求，其中 content-type 為 multipart/form-data。
- wx.previewMedia(): 預(yù)覽圖片和視頻。
二、代碼
upload.wxml
<view class="study-title">圖片上傳原理</view>
<view class="show-img-box">
<view class="img-item-box" wx:for="{{imgList}}" wx:key="*this" data-src="{{item}}" data-src-list="{{imgList}}" bindtap="clickImg">
<image class="img-item" src="{{item}}" />
</view>
<view class="upload" bindtap="chooseImgType">
<view class="img-upload"></view>
</view>
</view>
upload.wxss
/* pages/upload/upload.wxss */
.study-title {
width: 100vw;
margin: 50rpx 0;
font-size: 40rpx;
font-weight: 800;
text-align: center;
}
.show-img-box {
width: 600rpx;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.img-item-box {
width: 184rpx;
height: 184rpx;
margin: 4px;
background-color: #ccc;
}
.img-item {
width: 184rpx;
height: 184rpx;
}
.upload {
margin: 4px;
width: 184rpx;
height: 184rpx;
background: rgba(203, 224, 208, 0.5);
border-radius: 5rpx;
display: flex;
align-items: center;
justify-content: center;
}
.img-upload {
width: 120rpx;
height: 120rpx;
background-image: url(https://pro-core.babycdn.com/2021/aosmith/lottery/images2020/watersystem/case/robot/img_upload.png);
background-repeat: no-repeat;
background-size: cover;
}
upload.js文章來源：http://www.zghlxwxcb.cn/news/detail-586293.html
// pages/upload/upload.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
imgList: [], // 由于沒有可用的服務(wù)器域名，因此定義此數(shù)據(jù)用于展示上傳的圖片，以演示圖片預(yù)覽功能
imgFilePaths: [], // 上傳的圖片存放路徑，有可用的服務(wù)器域名用此數(shù)據(jù)渲染
showSelect: false, // 是否顯示選擇框
host: "https://5blog.com/Api", // 服務(wù)器域名，此處為錯(cuò)誤域名
},
// 彈出操作菜單，選擇獲取圖片的方式
chooseImgType() {
// 顯示操作菜單
wx.showActionSheet({
itemList: ["從相冊(cè)選擇", "拍照"],
success: (res) => {
if (res.tapIndex == 0) {
this.chooseImg("album");
} else if (res.tapIndex == 1) {
this.chooseImg("camera");
}
},
});
},
// 選擇圖片
chooseImg(type) {
let { imgFilePaths } = this.data;
wx.chooseImage({
// 從本地相冊(cè)選擇照片或使用相機(jī)拍照
count: 9, // 最多可以選擇的圖片張數(shù), 默認(rèn)9
sizeType: ["original", "compressed"], // 所選圖片的尺寸，默認(rèn)原圖和壓縮圖都可以
sourceType: [type], // 選擇圖片的來源，默認(rèn)相冊(cè)和相機(jī)都可以
success: async (res) => {
// 接口調(diào)用成功的回調(diào)
// console.log("res", res);
// res.tempFilePaths是臨時(shí)文件路徑數(shù)組，數(shù)組內(nèi)的元素可以直接作為src使用
const tempFilePaths = res.tempFilePaths;
this.setData({
imgList: res.tempFilePaths,
});
let tempLength = 9 - imgFilePaths.length;
let tempFilePaths_ = tempFilePaths.splice(0, tempLength);
// 得到所有上傳成功后的圖片url組成的數(shù)組
let imgUrlArr = await Promise.all(
// 實(shí)現(xiàn)上傳所有圖片到服務(wù)器
tempFilePaths_.map((item, index) => {
// 返回每張圖片的上傳結(jié)果
return this.updateImg(item, index);
})
);
console.log("imgUrlArr", imgUrlArr);
// 根據(jù)需求補(bǔ)充其他內(nèi)容
},
fail: (err) => {
console.log(type);
// 接口調(diào)用失敗的回調(diào)
console.log("圖片選取上傳錯(cuò)誤", err);
},
complete: () => {
// 接口調(diào)用結(jié)束的回調(diào)（調(diào)用成功、失敗都會(huì)執(zhí)行）
},
});
},
// 實(shí)現(xiàn)將單張圖片上傳服務(wù)器，上傳成功返回圖片url，上傳失敗返回false
updateImg(src, index = 0) {
wx.showLoading({
title: "上傳中...",
mask: true,
});
// 將本地資源上傳到服務(wù)器接口，客戶端發(fā)起一個(gè)post請(qǐng)求
// 其中content-type為multipart/form-data
return new Promise((resolve, reject) => {
wx.uploadFile({
url: this.data.host + "/Attach/Index/upload", // 開發(fā)者服務(wù)器地址
filePath: src, // 要上傳文件資源的路徑（本地路徑）
header: {
"content-type": "multipart/form-data", // 默認(rèn)值
},
name: "img", // 文件對(duì)應(yīng)的key，開發(fā)者在服務(wù)端通過這個(gè)key獲取文件的二進(jìn)制內(nèi)容
formData: {
// http請(qǐng)求中其他額外的form data
type: "image",
index: index,
},
// 上傳成功的回調(diào)
success: function (res) {
console.log("res", res);
if (res && res.data && !res.data.error) {
let img = JSON.parse(res.data);
resolve(img.data);
} else {
wx.showToast({
title: "圖片提交失敗",
icon: "none",
duration: 1500,
});
resolve(false);
}
},
complete: function (res) {
wx.hideLoading();
},
});
});
},
// 實(shí)現(xiàn)圖片預(yù)覽
clickImg(e) {
let src = e.currentTarget.dataset.src;
let sources = e.currentTarget.dataset.srcList;
console.log(sources);
sources = sources.map((item) => {
return {
url: item, // 鏈接
type: "image", // 默認(rèn)類型是圖片
};
});
// 預(yù)覽圖片和視頻接口
wx.previewMedia({
sources: sources,
});
},
});
三、效果演示
這里進(jìn)行了真機(jī)調(diào)試以演示以上代碼的實(shí)際運(yùn)行效果。
此處選擇了從相冊(cè)選擇
文章來源地址http://www.zghlxwxcb.cn/news/detail-586293.html
到了這里，關(guān)于微信原生實(shí)現(xiàn)一個(gè)簡(jiǎn)易的圖片上傳功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
