微信小程序的图片/视频上传功能，小程序官网是提供了相关的API语法。本例使用了 wx.chooseMedia 选择或拍摄图片/视频附件，通过 wx.uploadFile 方法上传至服务器，在需要的地方将服务器存储的附件地址查询出来提供展示预览。预览主要实现了图片的手势缩放及托动，视频的可全屏播放等功能。
本例主要使用了taro及taro ui 组件开发，与小程序官方语言基本兼容，定义了附件的上传及预览taro组件，具体代码如下：
1.部分样式代码(customAnnex.styl)：
.at-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%; }
.at-row__direction--row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.at-row__direction--column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.at-row__direction--row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.at-row__direction--column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.at-row__align--start {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-align: start; }
.at-row__align--end {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-align: end; }
.at-row__align--center {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center; }
.at-row__align--stretch {
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-align: stretch; }
.at-row__align--baseline {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-align: baseline; }
.at-row__justify--start {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: start; }
.at-row__justify--end {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-pack: end; }
.at-row__justify--center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: center; }
.at-row__justify--between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-pack: justify; }
.at-row__justify--around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-pack: space-around; }
.at-row__align-content--start {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start; }
.at-row__align-content--end {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end; }
.at-row__align-content--center {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center; }
.at-row__align-content--between {
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between; }
.at-row__align-content--around {
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around; }
.at-row__align-content--stretch {
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch; }
.at-row--no-wrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.at-row--wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.at-row--wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.at-col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1;
width: 100%;
display: block;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.at-col-1 {
-webkit-flex: 0 0 8.33333%;
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
-webkit-box-flex: 0;
max-width: 8.33333%; }
.at-col__offset-1 {
margin-left: 8.33333%; }
.at-col-2 {
-webkit-flex: 0 0 16.66667%;
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
-webkit-box-flex: 0;
max-width: 16.66667%; }
.at-col__offset-2 {
margin-left: 16.66667%; }
.at-col-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
-webkit-box-flex: 0;
max-width: 25%; }
.at-col__offset-3 {
margin-left: 25%; }
.at-col-4 {
-webkit-flex: 0 0 33.33333%;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
-webkit-box-flex: 0;
max-width: 33.33333%; }
.at-col__offset-4 {
margin-left: 33.33333%; }
.at-col-5 {
-webkit-flex: 0 0 41.66667%;
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
-webkit-box-flex: 0;
max-width: 41.66667%; }
.at-col__offset-5 {
margin-left: 41.66667%; }
.at-col-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
-webkit-box-flex: 0;
max-width: 50%; }
.at-col__offset-6 {
margin-left: 50%; }
.at-col-7 {
-webkit-flex: 0 0 58.33333%;
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
-webkit-box-flex: 0;
max-width: 58.33333%; }
.at-col__offset-7 {
margin-left: 58.33333%; }
.at-col-8 {
-webkit-flex: 0 0 66.66667%;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
-webkit-box-flex: 0;
max-width: 66.66667%; }
.at-col__offset-8 {
margin-left: 66.66667%; }
.at-col-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
-webkit-box-flex: 0;
max-width: 75%; }
.at-col__offset-9 {
margin-left: 75%; }
.at-col-10 {
-webkit-flex: 0 0 83.33333%;
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
-webkit-box-flex: 0;
max-width: 83.33333%; }
.at-col__offset-10 {
margin-left: 83.33333%; }
.at-col-11 {
-webkit-flex: 0 0 91.66667%;
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
-webkit-box-flex: 0;
max-width: 91.66667%; }
.at-col__offset-11 {
margin-left: 91.66667%; }
.at-col-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-flex: 0;
max-width: 100%; }
.at-col__offset-12 {
margin-left: 100%; }
.at-col__align--top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
.at-col__align--bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.at-col__align--center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; }
.at-col--auto {
max-width: initial;
word-break: keep-all; }
.at-col--wrap {
white-space: normal;
word-wrap: break-word; }
.annex {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 200ms ease-in;
-o-transition: visibility 200ms ease-in;
transition: visibility 200ms ease-in;
z-index: 1000;
}
.annex--active {
visibility: visible;
}
.annex--active .annex__overlay,
.annex--active .annex__container {
opacity: 1;
}
.annex__overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
}
.annex__container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 600rpx;
max-height: calc(100vh - 300rpx);
overflow: hidden;
border-radius: 12rpx;
}
.annex__overlay, .annex__container {
opacity: 0;
-webkit-transition: opacity 200ms ease-in;
-o-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
}
.at-relative {
position: relative;
}
.at-col-class {
width: 222rpx !important;
height: 222rpx !important;
margin: 5rpx;
text-align: center;
border: 2rpx #d6e4ef solid;
position: relative;
display: block;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.at-col-img {
width: 218rpx !important;
height: 218rpx !important;
}
.at-col-close {
width: 36rpx;
height: 36rpx;
position: absolute;
top: 2rpx;
right: 2rpx;
border-radius: 100%;
background-color: #ffffff;
z-index: 99;
}
.at-col-add-img {
width:47rpx;
height:47rpx;
margin: 69rpx 85rpx auto 85rpx;
}
.at-col-add-text {
margin-top: 30rpx;
color: #999999;
}
.resultFont {
font-size:32rpx;
margin-top:30rpx;
}
.count_color {
color: #CCCCCC;
}
.hide {
display: none !important;
}
.show {
display: block;
}
.w100 {
width: 100%;
}2.部分逻辑代码(customAnnex.tsx)：
import Taro, { Config, Component } from '@tarojs/taro'
import './customAnnex.styl'
import {View, Image, Video} from '@tarojs/components'
import annexAdd from '../../../asset/images/index/annex-add.png'
import annexClose from '../../../asset/images/index/annex-close.png'
import blankImg from '../../../asset/images/index/blank.png'
import TaroReq from '../../../constants/tokenHandle.js'
import api from "../../../constants/api.json"
export default class customAnnex extends Component {
/**自定义的组件
* 指定config的类型声明为: Taro.Config
*
* 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
* 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
* 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
*/
/**
* *************重要API*************
* 作用：附件的上传
* 其余的需要的时候再扩展
* 使用：1、导入组件：import Cannex from '../../components/custom-annex/customAnnex'
* 2、使用组件： <Cannex></Cannex>
*
*/
config: Config = { };
maxNum: number = 3; // 最大附件上传数量
maxWidth: number = 300; // 最大预览宽度
constructor(props) {
super(props);
this.state = {
annexFiles: [], // 附件信息列表
addShow: true, // 是否展示添加设备
isOpened: false, // 展示的附件区域
annexShow: null, // 展示的附件内容
touch: {
distance: 0,
scale: 1,
baseWidth: null,
baseHeight: null,
scaleWidth: null,
scaleHeight: null,
startX: null,
startY: null,
moveTop: null,
moveLeft: null,
previousTwoFinger: false //此变量防止双指离开时，后离开的手指会触发图片移动
}
};
}
componentDidMount() {
try {
setTimeout(() => {
this.requstAnnex();
}, 500);
} catch (error) { }
}
//输入框赋值
touchSetHandle(valueMap: object) {
if (valueMap) {
for (let key in valueMap) {
this.state.touch[key]=valueMap[key];
}
this.setState({
touch: this.state.touch
});
}
}
// 结束
touchEndHandle() {
setTimeout(()=>{
this.touchSetHandle({
previousTwoFinger: false
})
}, 1000);
}
touchStartHandle(e) {
// 单手指缩放开始
if (e.touches.length == 1) {
if (!this.state.touch.previousTwoFinger){
let startX = e.touches[0].clientX;
let startY = e.touches[0].clientY;
this.touchSetHandle({ startX: startX, startY: startY });
}
} else {
// 注意touchstartCallback 真正代码的开始
// 当两根手指放上去的时候，就将distance 初始化。
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.touchSetHandle({ distance: distance });
}
}
touchMoveHandle(e) {
let touch = this.state.touch;
// 单手指移动
if (e.touches.length == 1) {
// 一只手指触摸触发移动
if (!this.state.touch.previousTwoFinger){
let moveX = this.state.touch.moveLeft + e.touches[0].clientX - this.state.touch.startX;
let moveY = this.state.touch.moveTop + e.touches[0].clientY - this.state.touch.startY;
let deffWidth = this.state.touch.baseWidth - this.state.touch.scaleWidth;
let deffHeight = this.state.touch.baseHeight - this.state.touch.scaleHeight;
let calcFun = function (deff, move) {
if (deff >= 0 ) {
if (deff <= move) {
move = deff;
} else {
move = move > 0 ? move : 0;
}
} else {
if (move <= deff) {
move = deff;
} else {
move = move < 0 ? move : 0;
}
}
return move;
};
moveX = calcFun(deffWidth, moveX);
moveY = calcFun(deffHeight, moveY);
let startX = e.touches[0].clientX;
let startY = e.touches[0].clientY;
this.touchSetHandle({ moveLeft: moveX, moveTop: moveY, startX: startX, startY: startY });
}
} else {
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
// 新的 ditance
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
let distanceDiff = distance - touch.distance;
let newScale = touch.scale + 0.005 * distanceDiff;
// 为了防止缩放得太大，所以scale需要限制，同理最小值也是
if (newScale >= 4) {
newScale = 4;
}
if (newScale <= 1) {
newScale = 1;
}
let scaleWidth = (newScale * touch.baseWidth).toFixed(2);
let scaleHeight = (newScale * touch.baseHeight).toFixed(2);
// 赋值 新的 => 旧的
this.touchSetHandle({
distance: distance,
scale: newScale,
scaleWidth: scaleWidth,
scaleHeight: scaleHeight,
diff: distanceDiff,
previousTwoFinger: true
});
}
}
imgLoad(e) {
// 这个api是<image>组件的api类似<img>的onload属性
let width = this.maxWidth; // 预览最大宽度
let height = (width / e.detail.width * e.detail.height).toFixed(2);
this.touchSetHandle({
baseWidth: width,
baseHeight: height,
scaleWidth: width,
scaleHeight: height,
moveTop: 0,
moveLeft: 0,
previousTwoFinger: false
});
}
/*控制附件新增按钮*/
setAddShow() {
if (this.state.annexFiles && this.state.annexFiles.length >= this.maxNum) {
this.setState({
addShow: false
});
} else {
this.setState({
addShow: true
});
}
}
/*添加附件*/
addAnnex() {
let that = this;
wx.chooseMedia({
count: 1,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
sizeType: ['original', 'compressed'],
maxDuration: 20,
camera: 'back',
success(res) {
if (res && res.tempFiles && res.tempFiles.length > 0) {
let annexFiles: any[] = [...that.state.annexFiles];
let image = res.type=="video" ? res.tempFiles[0].thumbTempFilePath : res.tempFiles[0].tempFilePath;
annexFiles.push({ type: res.type, path: res.tempFiles[0].tempFilePath, iconPath: image });
that.setState({
annexFiles: annexFiles
}, () => {
that.setAddShow();
});
}
},
fail() {
Taro.showToast({
title: '附件添加失败！',
icon: 'none',
duration: 3000
})
}
});
}
/*删除附件*/
delAnnex(index) {
let annexFiles: any[] = this.state.annexFiles.filter((val, i) => i != index);
this.setState({
annexFiles: annexFiles
}, () => {
this.setAddShow();
});
}
/*展示附件*/
clickAnnexShow(annex) {
if (annex && annex.type) {
this.setState({
annexShow: annex,
isOpened: true
});
}
}
/*控制展示*/
clickAnnexHandle(flag) {
this.setState({
annexShow: null,
isOpened: flag
});
}
/*请求附件*/
requstAnnex() {
const { isUpload, idName, idValue } = this.props;
if(isUpload) { return; }
this.setState({
addShow: false,
});
if(idName && idValue) {
let formData: object = {page: 1, rows: 100};
formData[idName] = idValue;
TaroReq.get(api.url + api.attachMentList, formData).then(res => {
if (res.statusCode == 200) {
const data = res.data.rows || [];
let annexFiles: any = [];
for (let index=0; index<data.length; index++) {
let type = data[index].type=="mp4" ? "video":data[index].type;
annexFiles.push({ type: type, path: api.url + data[index].path, iconPath: api.url + data[index].iconPath });
}
this.setState({
annexFiles: annexFiles
});
}
});
}
}
//多附件上传
uploadMuliteFile(data) {
let that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
header: data.header,
url: data.url,
filePath: data.path[i],
name: 'file',
formData: data.formData,
success: (res) => {
success++;
},
fail: (res) => {
fail++;
},
complete: () => {
i++;
if (i == data.path.length) { //当图片传完时，停止调用
Taro.hideLoading();
const tip = fail > 0 ? (success+'个附件上传成功，' + fail + '个附件上传失败！') : ('附件上传成功！');
Taro.showToast({
title: tip,
icon: 'none',
duration: 3000
});
if (data.callFun && typeof data.callFun == "function") {
data.callFun();
}
} else { //若图片还没有传完，则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadMuliteFile(data);//递归，回调自己
}
}
});
}
/*上传附件*/
uploadAnnex(params) {
const annexFilePaths: any[] = [];
for (let i = 0; i < this.state.annexFiles.length; i++) {
annexFilePaths.push(this.state.annexFiles[i].path);
}
if (annexFilePaths && annexFilePaths.length > 0) {
Taro.showLoading({
title: '附件上传中...',
mask: true
});
let reqToken = Taro.getStorageSync('access_token_' + 'TM-WXapplet');
let reqHeader = { 'content-type': params.contentType || 'multipart/form-data', Authorization: 'Bearer ' + reqToken };
this.uploadMuliteFile({
header: reqHeader,
url: params.url || (api.url + api.attachMentUpload),
path: annexFilePaths,
formData: params.formData || null,
callFun: params.callFun || null
});
}
}
render() {
const { isUpload, idName, idValue } = this.props;
const { annexFiles, addShow, isOpened, annexShow, touch } = this.state;
return (
<View>
{isUpload
? <View>
<View className="at-row resultFont">
<View className="at-col at-col-11">上传附件</View>
<View className="at-col at-col-1 count_color">{annexFiles.length}/{this.maxNum}</View>
</View>
<View className="at-row at-relative at-row--wrap resultFont">
{annexFiles.map((annexFile, index) =>
<View className="at-col-class">
<Image className="at-col-img" mode='aspectFit' src={annexFile.iconPath} onClick={this.clickAnnexShow.bind(this, annexFile)}></Image>
<Image className="at-col-close" src={annexClose} onClick={this.delAnnex.bind(this, index)}></Image>
</View>
)}
<View className="at-col-class {{addShow?'show':'hide'}}" onClick={this.addAnnex.bind(this)}>
<Image className="at-col-add-img" src={annexAdd}></Image>
<View className="at-col-add-text">视频/图片</View>
</View>
</View>
</View>
: <View className="at-row at-relative at-row--wrap resultFont">
{annexFiles.map((annexFile) =>
<View className="at-col-class">
<Image className="at-col-img" mode='aspectFit' src={annexFile.iconPath} onClick={this.clickAnnexShow.bind(this, annexFile)}></Image>
</View>
)}
</View>
}
<View className="annex {{isOpened?'annex--active':''}}">
<View className="annex__overlay" onClick={this.clickAnnexHandle.bind(this, false)}></View>
{(annexShow.type && annexShow.path)
? <View className="annex__container">
{annexShow.type=="video"
? <View style="position: relative;">
<Video
objectFit="cover"
src={annexShow.path}
controls={true}
autoplay={true}
initialTime={0}
loop={false}
muted={false}
/>
<Image className="at-col-close" src={annexClose} onClick={this.clickAnnexHandle.bind(this, false)}></Image>
</View>
: <View style="position: relative; min-height: {{touch.baseHeight}}px;">
<Image mode='aspectFit' src={annexShow.path}
onTouchStart={this.touchStartHandle.bind(this)}
onTouchMove={this.touchMoveHandle.bind(this)}
onTouchEnd={this.touchEndHandle.bind(this)}
onLoad={this.imgLoad.bind(this)}
style="position: absolute; width: {{touch.scaleWidth}}px; height: {{touch.scaleHeight}}px; top: {{touch.moveTop}}px; left: {{touch.moveLeft}}px;"></Image>
<Image className="at-col-close" src={annexClose} onClick={this.clickAnnexHandle.bind(this, false)}></Image>
</View>
}
</View>
: <View className="annex__container"><Image className="at-col-img" mode='scaleToFill' src={blankImg}></Image></View>
}
</View>
</View>
)
}
}3.其他组件引用代码：
上传的时候调用：
import Cannex from '../../components/custom-annex/customAnnex' // 引入组件
cannex: any;
refCannex = (node) => { this.cannex = node }; // 获取组件实例
cannex.uploadAnnex({ // 调用组件上传方法
formData: { 'xxx': 'xxx'},
callFun: function () { }
});
<Cannex ref={this.refCannex} isUpload={true}></Cannex> // 组件视图上传的时候效果：
预览时候的调用：
import Cannex from '../../components/custom-annex/customAnnex' // 引入组件
<Cannex isUpload={false} idName='xxx' idValue={xxx} ></Cannex> // 预览加载组件预览时候的效果：
注意：wx.chooseMedia在临时拍照上传时，文件可能为 .unknown 后缀,需要服务器端处理替换为.jpg处理。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
