Vue.js 2.0移动端拍照压缩预览与H5+上传实战

vue

图片压缩上传

143 浏览量更新于2024-08-31 收藏 87KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

Vue.js 2.0 移动端拍照压缩图片预览及上传实例移动端拍照压缩图片预览及上传实例

主要介绍了Vue.js 2.0 移动端拍照压缩图片预览及上传实例，本来移动端开发H5应用，准备将mui框架和

Vue.js+vue-router+vuex 全家桶结合起来使用

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-

router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传

功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我

将此功能使用调用H5+接口实现。

首先我来讲我实现这个拍照预览压缩上传的思路，准确的说应该是拍照或选择图片压缩之后预览及上传这个流程。每次拍照或

选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG , 这个插件的使用说明可以去看wiki，基本原理

是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片），压缩效果很不

错，ios拍照2MB多压缩下来大概是60-80kb左右，失真不是太严重，但是对我的项目来说图片清晰可见就好，我贴的代码里面

也会有使用的演示。

<span>请选择或者拍照上传照片</span>

</div>

</a>

</li>

</li>

</ul>

</div>

</div>

</template>

export default {

data: function () {

return {

imgUrls: [],

urlArr: [],

isPhoto: true,

btnTitle: '',

isModify: false,

previewImg:'',

isPreview: false

}

watch: {

imgUrls: 'toggleAddPic'

methods: {

toggleAddPic: function() {

let vm = this;

if(vm.imgUrls.length >= 1) {

vm.isPhoto = false;

} else {

vm.isPhoto = true;

}

addPic: function(e) {

let vm = this;

$('input[type=file]').trigger('click');

return false;

onFileChange: function(e) {

var files = e.target.files || e.dataTransfer.files;

if(!files.length) return;

this.createImage(files, e);

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38719890

粉丝: 4
资源: 992

Vue.js 2.0移动端拍照压缩预览与H5+上传实战

最新资源