/**
* @description : 拍摄或从手机相册中选择图片和视频 ::> 不支持同时上传视频和图片(再一次上传过程中)
* @author : evil
* @date : 2021-02-18 19:30:20
* @param {number} options.count 最多可以选择的文件个数
* @param {array} options.mediaType 最多可以选择的文件个数 ::> 包含image 可以选择图片或者拍摄图片 包含video 可以选择视频或者拍摄视频
* @param {array} options.sourceType 图片和视频选择的来源 ::> 包含album 从相册选择 包含camera 使用相机拍摄
* @param {array} options.maxDuration 视频拍摄时长 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间
* @param {array} options.camera 仅在 sourceType 包含 camera 时生效，使用前置或后置摄像头
* @param {array} options.maxfileSize 最大的文件大小 单位是 M
*/
const chooseMedia = (options) => {
return new Promise((resolve) => {
// 最多可以选择的文件个数
const _count = options.count || 1;
// 选择的文件类型
const _mediaType = options.mediaType || ["image", "video"];
// 图片和视频选择的来源
const _sourceType = options.sourceType || ["album", "camera"];
// 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间
const _maxDuration = options.maxDuration || 10;
// 仅在 sourceType 包含 camera 时生效，使用前置或后置摄像头
const _camera = options.camera || "back";
// 最大文件限制 默认不做限制 微信限制多少就是多少
const _maxfileSize = options.maxfileSize || -1;
options.maxFileSize ||
wx.chooseMedia({
count: _count,
mediaType: _mediaType,
sourceType: _sourceType,
maxDuration: _maxDuration,
camera: _camera,
success: (result) => {
// Array.<Object> 本地临时文件列表
const _tempFiles = result.tempFiles;
// 文件类型，有效值有 image 、video
const _type = result.type;
let _chooseMediaResult = { success: true, completeFileList: [], failFileList: [], sourceFileList: _tempFiles };
_tempFiles.forEach((_tpCfg) => {
/**
* @description : _tpCfg 临时文件列表的数据
* @author : evil
* @date : 2021-02-18 19:47:02
* @param {string} _tpCfg.tempFilePath 本地临时文件路径 (本地路径)
* @param {number} _tpCfg.size 本地临时文件大小，单位 B
* @param {number} _tpCfg.duration 视频的时间长度
* @param {number} _tpCfg.height 视频的高度
* @param {number} _tpCfg.width 视频的宽度
* @param {string} _tpCfg.thumbTempFilePath 视频缩略图临时文件路径
*/
// 标识文件类型
_tpCfg.fileType = _type;
// 如果没有传入 最大 文件限制 就不判断文件大小
if (_maxfileSize <= 0) _chooseMediaResult.completeFileList.push(_tpCfg);
else {
// 传入最大的文件大小是 M 这里转化为 B 1 M = 1*1024*1024 B
const _tpMaxfileSize = _maxfileSize * 1024 * 1024;
// 按照是否超出文件大小限制 对上传成功的文件进行分类
if (_tpCfg.size > _tpMaxfileSize) _chooseMediaResult.failFileList.push(_tpCfg);
else _chooseMediaResult.completeFileList.push(_tpCfg);
}
});
return resolve(_chooseMediaResult);
},
fail: (result) => resolve({ success: false, ...result, result }),
});
});
};
用我们公司大佬写的代码,在测试的时候发现ios的GIF都会变成jpg静态文件,一开始以为就是wx接口的问题,然后全网搜索才都没有解决办法,找了几个可以上传图片的小程序尝试发现都可以上传Gif,我就不信邪.
发现微信文档还有chooseImage可以上传图片,然后进行尝试发现就是chooseMedia的问题。
/**
* @description : 拍摄或从手机相册中选择图片 支持Gif功能
* @author : zhangyijie
* @date : 2021-06-19 23:35:25
*/
const chooseImage = (options) => {
return new Promise((resolve) => {
// 最多可以选择的文件个数
const _count = options.count || 1;
// 选择的文件类型
const _sizeType = options.sizeType || ["original", "compressed"];
// 图片和视频选择的来源
const _sourceType = options.sourceType || ["album", "camera"];
// 最大文件限制 默认不做限制 微信限制多少就是多少
const _maxfileSize = options.maxfileSize || -1;
options.maxFileSize ||
wx.chooseImage({
count: _count,
sizeType: _sizeType,
sourceType: _sourceType,
success: (result) => {
console.log("result", result);
// Array.<Object> 本地临时文件列表
const _tempFiles = result.tempFiles;
let _chooseImageResult = { success: true, completeFileList: [], failFileList: [], sourceFileList: _tempFiles, tempFilePaths: [] };
_tempFiles.forEach((_tpCfg) => {
/**
* @description : _tpCfg 临时文件列表的数据 TODO 和chooseMedia一致path会修改成tempFilePath
* @author : zhnagyijie
* @date : 2021-02-18 19:47:02
* @param {string} _tpCfg.path 本地临时文件路径 (本地路径)
* @param {number} _tpCfg.size 本地临时文件大小，单位 B
*/
// 如果没有传入 最大 文件限制 就不判断文件大小
_tpCfg.tempFilePath = _tpCfg.path;
if (_maxfileSize <= 0) {
_chooseImageResult.completeFileList.push(_tpCfg);
//全是图片path的数组
_chooseImageResult.tempFilePaths.push(_tpCfg.path)
} else {
// 传入最大的文件大小是 M 这里转化为 B 1 M = 1*1024*1024 B
const _tpMaxfileSize = _maxfileSize * 1024 * 1024;
// 按照是否超出文件大小限制 对上传成功的文件进行分类
if (_tpCfg.size > _tpMaxfileSize) _chooseImageResult.failFileList.push(_tpCfg);
else _chooseImageResult.completeFileList.push(_tpCfg);
}
});
return resolve(_chooseImageResult);
},
fail: (result) => resolve({ success: false, ...result, result }),
});
});
};
附上代码,希望大家不要踩我这样子的坑
顺便发现微信文档里面竟然有预览图片的接口
/**
* @description : 预览图片
* @author : zhangyijie
* @date : 2021-06-20 00:47:52
* @param {*} path
*/
async previewImageEvent(path) {
console.log("我点击了",this.uploadList);
await wx.previewImage({
current: path, // 当前显示图片的http链接
urls: this.previewList, // 需要预览的图片http链接列表
});
},
