html图片上传布局,上传图片(压缩图片再上传),布局参考以前的文章(https://www.jianshu.com/p/d379ab1b3eec)...
引入一个js:
百度网盘链接:https://pan.baidu.com/s/1KO9gH4r6bP-foYVAQn5AxQ
提取码:mgcm
复制这段内容后打开百度网盘手机App,操作更方便哦
html:(@change="changeImage($event)" 触发选择图片)
accept="image/*" @change="changeImage($event)">
业务逻辑:
//添加图片
changeImage(e) {
let reader = new FileReader();//创建文件对象
let z = new zz();//创建压缩对象
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (e) {
$('#loading').show();
let ImgFile = this.result;
//如果图片大于2M就压缩,否则直接上传
if (ImgFile.length / (1024 * 1024) > 2) {
z.compressPhotoUpload({
elem: document.querySelector("#input"), //必传,上传图片的input元素
ratio: 0.3, //默认为0.1 压缩比
maxsize: 1024, //默认为1024,单位为kb 大于此值则做压缩操作
success: (e) => { //必传,成功后的回调函数,返回的参数是图片信息(对象)
// console.log(e);
$('#loading').hide();
// $("#bq-upload-img").attr("src", e.data).fadeIn();//给img标签渲染压缩后的图片
let bl = pubGoodsPage.convertBase64UrlToBlob(e.data);//将base64对象转为blob对象
var File = new window.File([bl], e.name, {
type: e.dataType,
lastModified: Date.now()
});//将blob对象转为文件对象
pubGoodsPage.uploadImage(File);//执行上传操作
}
});
} else {
// $("#bq-upload-img").attr("src", ImgFile);//给img标签渲染压缩后的图片
let file = document.getElementById("input").files[0];//获取表单文件对象
pubGoodsPage.uploadImage(file);//执行上传操作
}
}
},
//base64转64对象
convertBase64UrlToBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type: 'image/png'});
},
//上传图片
uploadImage(para) {
//开始准备图片数据
let file = para;
let form = new FormData();
form.append("file", file);
//上传图片到后台
$.ajax({
type: "post",
url: bqUrl.pubwelUploadImg,
data: form,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function () {
$('#loading').show();
},
timeout: 60000,
success: function (res) {
$('#loading').hide();
if (res.result == 1) {
$("#input").attr("type", "text");
$("#input").attr("type", "file");
pubGoodsPage.pubImage.push(res.data.fileName);
} else {
console.log("上传图片失败!")
}
},
error: function (res) {
$('#loading').hide();
console.log("请求失败!");
mui.alert("网络错误,请刷新之后重试!", function () {
window.location.reload();
})
}
})
},
html图片上传布局,上传图片(压缩图片再上传),布局参考以前的文章(https://www.jianshu.com/p/d379ab1b3eec)...相关推荐
- 图片太大,怎么压缩图片大小?
图片太大,怎么压缩图片大小?我们知道图片被应用到生活的方方面面,所以我们经常会遇到因图片体积大半天打不开,或者是因为图片大好传送不过去.再或者因为图片太多内存不够等等情况,总之可能会带来很多我们预想不 ...
- element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
- node 压缩图片_为了你安全压缩图片我操碎了心
近期有几个用户询问压缩的都是证件照和扫码件图片,太美工具站是否安全?我如实的按本文末尾回答了.虽然本站去年底就发布并上线了不上传图片的压缩图片工具-自定义图片压缩,可以从技术上永久解决了私密.隐私图片 ...
- 微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了 接下来我们看看如何实现的吧 上传图片功能 效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
- node 压缩图片_用图压批量压缩图片就这么简单
像平时很多情况都需要用到图片压缩,例如雷锋哥在公众号给大家发文,图片上传是有限制大小的,又或者文档/PPT里面的图片太大,导致传送麻烦,这时候就需要对图片进行压缩体积减少大小. 市面上图片压缩工具选择 ...
- 如何压缩图片到500KB?怎么压缩图片到指定大小?
如何压缩图片到500KB?这就需要用到压缩啦的图片压缩指定大小工具,只需三步就可以轻松压缩图片大小kb,具体操作步骤如下: 1.使用浏览器打开压缩啦,选择图片压缩指定大小功能. 2.上传需要压缩的图片 ...
- php写后台轮播图,dedecms图片相关问题—后台上传图片实现图片轮播
用织梦dedecms套网站已经做了几个了,但图片轮播始终是用手工改代码.今天研究了一下在后台上传图片来实现图片轮播的. 首先那当然是设置网站的栏目了,我的栏目名是取的大眼睛(这里随便取了),内空模型: ...
- 怎样修改图片kb大小?如何压缩图片jpg格式?
大家在生活办公中经常会用到jpg图片文件,在制作小红书.抖音封面.公众号文章中都需要插入图片,但是图片大小各有不同,所以需要根据自己的需求进行jpg图片压缩.那么今天就为大家介绍一下使用jpg图片压缩 ...
- android 批量压缩图片大小,Android异步批量压缩图片
最近稍微空闲了一点,然后开始整理一下之前项目用到的东西,方便以后项目再次使用.很多项目需要用到发布图片的功能吧,像社区朋友圈之类的,如果直接把图片不经过压缩上传,那体验肯定不好,第一个浪费流量.第二个 ...
最新文章
- ACMNO.34 C语言-格式输出 请设计输出实数的格式,包括:⑴一行输出一个实数;⑵一行内输出两个实数;⑶一行内输出三个实数。实数用6.2f格式输出。
- Linux下rz,sz与ssh的配合使用,实现文件传输
- MySQL连不上,报Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
- 【蓝桥杯省赛】冲刺练习题【数学公式】倒计时【06】天(准考证组委会已下发,请查询)
- ASP.net 網站和Web Application的區別(轉)
- URAL - 1099 Work Scheduling(一般图最大匹配-带花树模板)
- matlab lmi 定义一个任意方阵,matlab中LMI应用说明
- HTML用户点击新建按钮,html – 需要点击按钮
- 从1.5k到18k, 一个程序员的5年成长之路【转载】
- 里面怎么定义变量_小哥今天要给朋友们分享一下Java编程语言中的变量与常量的区别...
- LeetCode 221. 最大正方形(动态规划)
- 我看韩剧《寄生虫》,一副好牌究竟是怎么被打烂的?
- Word插入Excel的时候报错:用于创建此对象的程序是Excel
- 天啦噜!逾期未还三年,欠款3万变成34万
- 浅谈后缀自动机SAM
- python opencv 读取图片_Python opencv 读取图像
- mbp适合程序员_听说这两款是最适合程序员编程的电脑
- Docker应用(一)Elasticsearch
- 最新云豹二开直/播短视频完整系统源码+带开发文档/教程
- WIN7/10定时关机或重启命令行脚本代码集锦
热门文章
- 中国银联(霸面—面试经验)
- 微信小程序跳转第三方网页、第三方小程序。
- oppo r7刷linux,OPPO R7线刷教程_OPPO R7线刷系统包_R7移动版救砖用
- java从ftp上下载图片到客户端本地
- linux 链接数据库mysql数据库文件_linux 命令行 链接mysql数据库
- Ublox F9P通过NTRIP实现实时RTK定位
- 安卓系统的指纹解锁_安卓全面屏都用的屏幕下指纹识别,科普超声波指纹识别的原理...
- PMP 第8章 项目质量管理
- [计算机毕业设计]关联挖掘的服装推荐系统
- 内核自带的基于GPIO的LED驱动学习(一)