选择图片

         afterRead(event){ //获取图片地址console.log(event.file) let files = event.file.map(e=>{ //选择一张或多张时处理return e.url})this.compress(files)  //压缩的方法},

获取图片并压缩

         compress(files){//图片压缩并上传const that =thislet compressFile = []files.forEach(e=>{  //循环压缩并上传that.$refs.wCompress.start(e, { //调用压缩组件方法// pixels: 630000,  // 最大分辨率，默认二百万quality: 0.8,     // 压缩质量，默认0.8     base64: true,     // 是否返回base64，默认false，非H5有效}).then(res => {// console.log(res) //base64格式this.uploadFile(res) //调用上传方法}).catch(e => {console.log(e)})})},

上传获取图片链接

         uploadFile(blobUrl){ //上传获取图片链接const that =thislet url = { //回显格式所以处理了下url:blobUrl}uni.showLoading({title: '上传中'})uni.uploadFile({url: that.urlA,// 上传地址filePath:blobUrl,name: 'file',header:that.header,formData: {'safety': 'question'},success: (res) => {let data = JSON.parse(res.data); //解析照片数据格式console.log(data)if(data.code == 10000){that.fileList1.push(url) //成功后回显that.imgurl.push(data.data) // 链接地址uni.hideLoading();}else{uni.hideLoading();that.$api.msg(`${data.message}`)}}});},

以下是整个文件

<template><view class=""><w-compress ref='wCompress' /><u-upload :fileList="fileList1" @afterRead="afterRead"@delete="deletePic" name="1" multiple :maxCount="3" ></u-upload></view>
</template><script>import WCompress from '@/components/w-compress/w-compress.vue'export default{data(){return {urlA: '------------', //假的地址header:{bigDataToken : 'Bearer' + ' ' + uni.getStorageSync('Token'),proToken : 'Bearer' + ' ' + uni.getStorageSync('proToken')},fileList1: [],imgurl:[]}},methods:{afterRead(event){ //获取图片地址console.log(event.file) let files = event.file.map(e=>{ //选择一张或多张时处理return e.url})this.compress(files)  //压缩的方法},deletePic(e){ //删除图片console.log(e.index)this.imgurl.splice(e.idnex,1)this.fileList1.splice(e.index,1)},compress(files){//图片压缩并上传const that =thislet compressFile = []files.forEach(e=>{  //循环压缩并上传that.$refs.wCompress.start(e, { //调用压缩组件方法// pixels: 630000,  // 最大分辨率，默认二百万quality: 0.8,     // 压缩质量，默认0.8     base64: true,     // 是否返回base64，默认false，非H5有效}).then(res => {// console.log(res) //base64格式this.uploadFile(res) //调用上传方法}).catch(e => {console.log(e)})})},uploadFile(blobUrl){ //上传获取图片链接const that =thislet url = { //回显格式所以处理了下url:blobUrl}uni.showLoading({title: '上传中'})uni.uploadFile({url: that.urlA,// 上传地址filePath:blobUrl,name: 'file',header:that.header,formData: {'safety': 'question'},success: (res) => {let data = JSON.parse(res.data); //解析照片数据格式console.log(data)if(data.code == 10000){that.fileList1.push(url) //成功后回显that.imgurl.push(data.data) // 链接地址uni.hideLoading();}else{uni.hideLoading();that.$api.msg(`${data.message}`)}}});},}}
</script><style>
</style>

效果图：

uniapp选择图片压缩并上传相关推荐

Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器.还会封装一个工具类,方便直接调用. 一.工具类封装废话不多说先上代码,封装一个 Comp ...
js图片压缩java上传,JS实现异步上传压缩图片
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 先看调用页面: 选择图片 var img; $("i ...
android 快速实现图片压缩与上传
由于最近项目更新功能比较的忙,也没时间去整理自己的知识点和管理自己的博客.在android对手机相册中的图片的压缩和上传到服务器上,这样的功能在每个app开发中都会有这样的需求.所以今天就对andro ...
js图片压缩并上传？
js: var eleFile = document.querySelector('#file'); // 压缩图片需要的一些元素和对象 var reader = new FileReader(); ...
jqWEUI对图片压缩并上传
jqWEUI样式,加图片上传到页面并预览 ------------------------------------------------- 补充:增加了图片压缩js 2018年6月29日 ---- ...
js 裁剪图片压缩并且上传图片
今天接到一个比较懒的后台的要求:后台要求在裁剪图片的同时,根据文件大小来按不同比例压缩图片. 页面代码 <!--** * *----------Created by 黄伟峰 on 2018/6/ ...
Android的图片压缩并上传
Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...

uniapp选择图片压缩并上传

选择图片——获取图路径——压缩图片——上传获取图片链接

选择图片

获取图片并压缩

上传获取图片链接

uniapp选择图片压缩并上传相关推荐

最新文章

热门文章