前言
多媒体文件处理，和普通文本处理不同，在此单独记录。
图片上传
语法
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
属性
- accept - 规定可提交的文件类型。
- capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机)，microphone(录音)
- mutiple - 支持多选。当支持多选时，multiple优先级高于capture。
写法
1.<!-- ios 和 安卓都可以调用摄像头 -->
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
2.<!-- 在安卓无法调用摄像头 -->
<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera">
3.<!-- 在安卓微信会出现 "No apps can perform this action" 在uc浏览器正常。ios能正常使用。pc端可以使用 -->
<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" />
4.<!-- 调用相机 -->
<input type="file" accept="image/*" capture="camera">
5.<!-- 调用摄像机 -->
<input type="file" accept="video/*" capture="camcorder">
6.<!-- 调用录音机 -->
<input type="file" accept="audio/*" capture="microphone">
7.<!-- 不加上capture，则只会显示相应的，例如下三种依次是：拍照或图库，录像或图库，录像或拍照或图库， -->
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >
示例
html部分：
<div class="center">
<input type="file" class="input-file" name="picture" ref="pictureFront" id="pictureFront"
@change="changeImage($event,'front')"
style="position: absolute;z-index: -1;left:-100%;opacity: 0"
accept="image/*"/>
<div @click="focus('pictureFront')" class="image">
<img v-if="picData.front" :src="picData.front" alt="">
<i v-else class="iconfont icon-shenfenzhengzhengmian"></i>
<div v-if="!picData.front">点击上传</div>
</div>
</div>
js部分：
changeImage (e, type) {
const file = e.target.files[0];
if (file) {
this.fileData[type] = file;
const reader = new FileReader();
const that = this;
reader.readAsDataURL(file);
reader.onload = function (e) {
// 这里的this 指向reader
that.picData[type] = this.result;
};
}
},
focus (type) {
this.$refs[type].click();
// document.getElementById(type).click(); // 和上述同样效果
},
图片压缩
/**
* @description 图片压缩
* @param {string} base64 图片base64数据
* @param {object} config 配置信息
* @param {number} config.maxSize 压缩后图片最大尺寸，单位kB
* @param {number} config.quality 图片质量
* @param {number} config.rate 图片压缩比例
* @param {number} config.destWidth 压缩后图片的宽度，优先级高于rate
* @param {number} config.destHeight 压缩后图片的高度，优先级高于rate
* @param {function} callback 回调函数
*/
export const compressBase64 = async (base64, config, callback) => {
const { rate = 1, maxSize = 500, quality = 1, destWidth, destHeight, fileType = 'image/jpeg' } = config
// 兼容部分机型base64类型
const img = new Image()
img.onload = function () {
// 利用onload生成新的base64
try {
// 防止canvas生成以及转换异常
const canvas = document.createElement('canvas')
// 等比例压缩
let lastRate = rate
if (destWidth || destHeight) {
const widthRate = destWidth ? destWidth / img.width : 1
const heightRate = destHeight ? destHeight / img.height : 1
lastRate = widthRate < heightRate ? heightRate : widthRate
}
canvas.width = img.width * lastRate
canvas.height = img.height * lastRate
const ctx: any = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 按quality压缩
const translatedBase64 = canvas.toDataURL(fileType, quality)
const size = getBase64Size(translatedBase64, fileType)
if (size > maxSize && rate < 1 && !destWidth && !destHeight) {
//如果还大，继续压缩
compressBase64(translatedBase64, config, callback)
} else {
callback(translatedBase64)
}
} catch (e) {
callback(base64)
}
}
img.onerror = () => {
callback(base64)
}
img.src = base64
}
参考：
input type="file" 在移动手机端H5页面实现调用本地相册、拍照、录音
---------------------------------------------------------------------------------------------
