移动端使用vue单页面图片上传

最新推荐文章于 2024-08-16 13:24:48 发布
最新推荐文章于 2024-08-16 13:24:48 发布
阅读量5k 收藏 3
点赞数
分类专栏： vue javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35430000/article/details/80939082
版权
vue 同时被 2 个专栏收录
84 篇文章 15 订阅
订阅专栏
javaScript
61 篇文章 0 订阅
订阅专栏

效果如下：



图片验证签名验证信息 url如下：图片验证信息与后端同学进行对接，可通过接口或url传递到前端。

http://192.168.1.9:8083?limit=5&label=‘xxx’&OSSAccessKeyId=LTAIpX3MEAfuMYiq&policy=eyJleHBpcmF0aW9uIjoiMjAxOC0wNy0wNlQwOToyNToxNVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsImltYWdlXC9wcmVzaWduZWRcL2NlcnRcLyJdXX0=&signature=UDWBhlwrYQrVt7rC3r5OXDcd/gs=&dir=image/presigned/cert/&host=http://xxxxxx.com&_t=1530840135305


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>上传图片</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no,email=no" name=format-detection />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />
	<!--<script src="/js/vue.min.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/plupload-3.1.2/plupload.full.min.js"></script>-->
	<!-- cdn -->
	
	<script src="http://vuejs.org/js/vue.min.js"></script>
	<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/plupload/3.1.2/plupload.full.min.js"></script>
	
	<style>
        /* 去除浏览器默认样式reset */
        html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
        }
        html, body {
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
        }
        main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
        ul {list-style: none;}
        table {border-collapse: separate; border-spacing: 0;}
        th {font-weight: bold; vertical-align: bottom;}
        td {font-weight: normal; vertical-align: top;}
        input{
            outline: none;
            border: none;
        }
        /* 页面样式 */
        .cf {
            zoom: 1;
        }

        .cf:after {
            content: "";
            display: table;
            clear: both;
        }
        .fl{
            float: left;
        }
        #app{
            width: 100%;
            height: 100%;
        }
        .logo{
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;

        }
        .logoImg{
            width: 1.6rem;
            height: 1.6rem;
        }
        .imgContent{
            margin-top: 0.2rem;
        }
        .imgContent p{
            font-size:0.26rem;
            color: #000000; 
            text-align: center;
        }
        .imgBody{
            margin-top: 0.4rem;
        }
        .imgCenter{
            margin: 0 auto;
            width: 6.6rem;
        }
        .pic-item {
            position:relative;
            width: 1.8rem;
            height: 1.8rem;
            margin:0 .4rem .4rem 0;
        }
        .pic-item img {
            width: 100%;
            height: 100%;
        }
        .delete-pic{
            position:absolute;
            top:-.15rem;
            right:-.15rem;
            border: 1px solid red;
            border-radius: 50%;
            z-index:1;
            width:.38rem;
            height:.38rem;
            text-align: center;
            line-height:.38rem;
        }
        .icon{
            font-size:.12rem;
            color:red;
            display:inline-block;
        }
        .onloadContent{
            width: 100%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            bottom: 0;
            left: 0;
        }
        .selectFile{
            width: 1.6rem;
            height: 1.6rem;
            line-height: 1.6rem;
            text-align: center;
            display: inline-block;
            background-color: #c6ae6c;
            border-radius: 50%;
            color: #ffffff;
            margin-right: 0.2rem;
        }
        .selectFile p{
            display: inline-block;
            width: 0.6rem;
            font-size: 0.24rem;
            line-height: 0.4rem;
            vertical-align: middle;
        }
        .confirmLoad{
            width: 1.6rem;
            height: 1.6rem;
            line-height: 1.6rem;
            text-align: center;
            display: inline-block;
            background-color: black;
            border-radius: 50%;
            color: #ffffff;
        }
        .confirmLoad p{
            display: inline-block;
            width: 0.6rem;
            font-size: 0.24rem;
            line-height: 0.4rem;
            vertical-align: middle;
        }
        /* 蒙版 */
        .appMask{
            width: 100%;
            height: 100%;
            z-index: 10;
            top: 0;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.3)
        }
        /* 图片弹出框 */
        .imgPop{
            width: 6rem;
            height: 8rem;
            background-color: red;
            position: fixed;
            z-index: 20;
            top: 12%;
            left: 50%;
            transform: translateX(-50%);

        }
        .popImg{
            width: 100%;
            height: 100%;
        }
        .popClose{
            position:absolute;
            top:-.15rem;
            right:-.15rem;
            border: 1px solid red;
            border-radius: 50%;
            z-index:21;
            width:.38rem;
            height:.38rem;
            text-align: center;
            line-height:.38rem;
        }
	</style>
</head>
<body>
	<div id="app">
        <div class="logo">
            <img class="logoImg" src="" alt="">
        </div>
        <div class="imgContent">
            <p>请选择{{label}}或拍照上传</p>
            <p>最多不超过{{limit}}张图片</p>
            <div class="imgBody">
                <div class="imgCenter cf">
                    <div class="pic-item fl" v-for="(imgsrc,index) in images" :key="index" @click="showPop(imgsrc)">
                        <img :src="imgsrc" alt="">
                        <span class="delete-pic" @click.stop="removeSelectImage(index)">
                            <i class="icon">X</i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="onloadContent">
            <input type="button" id="selectBtn" class='btn selectFile' value="选择上传" />
            <input type="button" @click="uplaod" class='btn confirmLoad' value="确认上传" />
        </div>
        <!-- 蒙版 -->
        <div class="appMask" v-show="popStatus"></div>
        <!-- 弹出层 -->
        <div class="imgPop" v-show="popStatus">
            <img class="popImg" :src=currentImg alt="">
            <span class="popClose" @click="closePop">
                <i class="icon">X</i>
            </span>
        </div>
	</div>
	
<script>
// 引入rem，使用rem单位，对不同手机屏幕进行适配
(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px' // 1rem  = 100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        }
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

// 截取url指定参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return decodeURIComponent(r[2]);
    return null; //返回参数值
}

var vapp = new Vue({
	el : '#app',
	data : {
		ossSignature : {OSSAccessKeyId:"",policy:"",signature:"",dir:'',host:'',success_action_status:'0',key:""},
		limit : 1,
		label : '',
		images:[],
		postImages:[],
        uploader : null,
        popStatus: false, //是否显示蒙版和图片弹出框
        currentImg:'' // 点开大图的当前图片
		
	},
	created : function(){
		console.log('created');
		this.ossSignature.OSSAccessKeyId = getUrlParam('OSSAccessKeyId');
		this.ossSignature.policy = getUrlParam('policy');
		this.ossSignature.signature = getUrlParam('signature');
		this.ossSignature.host = getUrlParam('host');
		this.ossSignature.dir = getUrlParam('dir');
		this.ossSignature.success_action_status = '200';
		this.ossSignature.key = '';

		this.limit = getUrlParam('limit');
		this.existed = getUrlParam('existed');
		this.label = getUrlParam('label');
		document.title = this.label;
	},
	mounted: function(){
		var self = this;
		this.uploader = new plupload.Uploader({
			runtimes : 'html5,gears,browserplus,silverlight,flash,html4', 
			browse_button : 'selectBtn',
			container: document.getElementById('app'),
			url : this.ossSignature.host, //服务器端的上传页面地址
			flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
			silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
			filters: {
				mime_types : [ //只允许上传图片和zip,rar文件
					{ title : "Image files", extensions : "jpg,png,bmp,jpeg" }
				],
				max_file_size : '10mb', //最大只能上传10mb的文件
				prevent_duplicates : true //不允许选取重复文件
			},
			init : {
				FilesAdded: function(up, files) {
					var oldLen = up.files.length - files.length;
					up.files.splice(self.limit, up.files.length);
					files = files.slice(0, self.limit - oldLen);
					files = files || [];
					plupload.each(files, function(file) {
						console.log(file);
						if (!file || !/image\//.test(file.type)) return; //确保文件是图片

						var fr = new plupload.FileReader();
						fr.onload = function () {
							file.imgsrc = fr.result;
							self.images.push(fr.result);
							//fr.destroy();
							fr = null;
						}
						fr.readAsDataURL(file.getSource());
					});
				},
				BeforeUpload:function(up, file){
					var fileName = file.name;
					var suffix = fileName.split('.').pop();
					fileName = self.random_string() + '.'+suffix;
					self.ossSignature.key = self.ossSignature.dir + fileName;
					file.remotePath = self.ossSignature.key;
				},
				FileUploaded: function(up, file, info) {
					if (info.status == 200){
						console.log(file.remotePath);
					}
				},
				UploadComplete : function(uploader){
					let len = uploader.files.length;
					for (var i=0;i<len;i++){
						self.postImages.push(self.ossSignature.host+'/'+uploader.files[i].remotePath);
					}
					self.postImages.splice(self.limit,uploader.files.length)
					$.ajax({
						type : 'post',
						url: '/upload/image/set',
						data : {signature:self.ossSignature.signature,images:self.postImages},
						dataType: 'json',
						success: function (data) {
							alert('上传成功');
						}	
					});
				}
			}
		});
		this.uploader.init();
	},
	methods : {
		selectImage: function(file, fileList){
			for (var i=0;i<fileList.length;i++){
				this.images.push(fileList[i].url);
			}
		},
		removeSelectImage : function(index){
			this.images.splice(index,1);
			console.log(JSON.stringify(this.uploader.files));
			this.uploader.files.splice(index,1);
			console.log(JSON.stringify(this.uploader.files));
		},
		random_string : function(len){
			len = len || 32;
			let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
			let maxPos = chars.length;
			let pwd = '';
			for (let i = 0; i < len; i++) {
				pwd += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		},
		uplaod : function(){
			if (this.images.length<=0){
				alert('请选择要上传的照片');
				return
			}
			this.uploader.setOption({
				'url': this.ossSignature.host,
				'multipart_params': this.ossSignature
			});
			this.uploader.start();
        },
        // 显示蒙版和弹出框
        showPop (imgsrc){
            this.currentImg = imgsrc
            this.popStatus = true
        },
        // 关闭蒙版和弹出框
        closePop (){
            this.popStatus = false
        }
	}
});
</script>
</body>
</html>


飞歌Fly
关注
专栏目录
基于vue的移动端图片上传
Dong8508的博客
09-27 9664
1、上传效果（含添加和删除设计图）： 达到上传上限，隐藏上传图标，删除后，数量小于上限会自动显示。 2、html代码 //使用前，要在JS中先把组件引入并挂载 import updatefile from "../common/uploadfile"; components: { updatefile }, //使用 <updatefile :multiple...
使用Vue + axios实现图片上传，轻松又简单
2301_77899321的博客
09-05 1762
使用Vue + axios实现图片上传，轻松又简单
Vue项目实现手机端上传图片，使用于PC/Android/Ios
01-08
基于Vue实现跨平台上传图片，pc端访问时上传图片资源，移动端访问时调用相册，可拍照和从相册里选择并在页面可进行预览。文档记录了java后端和vue前端两部分核心代码包括注释说明
Vue2移动端（H5项目）项目基于vant封装图片上传组件（支持批量上传、单个上传、回显、删除、预览、最大上传数等功能）---解决批量上传问题
最新发布
wocwin的博客
08-16 891
Vue2移动端（H5项目）项目基于vant封装图片上传组件（支持批量上传、单个上传、回显、删除、预览、最大上传数等功能）
vue+vux实现移动端文件上传样式
08-29
主要介绍了vue+vux实现移动端文件上传样式,样式使用的是vux的cell组件，需要的朋友可以参考下
Vue上传图片
ct5211314的博客
05-19 916
首先，讲一下上传图片的流程，相信大家一看就会了，一般通过elementUI等组件库的上传组件，获取到对应的选中的文件列表的信息，获取到列表信息中的raw属性，通过FormData构造数据，然后发送给后台，后台根据你发送的数据，生成对应的url，你获取到url后，将url作为入参发送给后台，一个图片上传的流程到这里就结束了。下面进行一些代码的讲解说明。
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
10-16
移动端Vue+Vant的Uploader实现上传、压缩、旋转图片功能，是利用了Vue.js框架结合Vant UI组件库中的Uploader组件来实现的。该功能主要针对移动端用户，提供了便捷的图片上传、压缩及旋转处理。以下是一些相关知识点...
物联网卡流量的查询充值系统的Vue单页面移动端项目.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，...
vue移动端项目包含列表、图片裁剪上传，微信分享微信支付.zip
10-21
在"vue移动端项目包含列表、图片裁剪上传，微信分享微信支付.zip"这个压缩包中，我们可以推测这是一个完整的移动端应用项目，使用Vue.js构建，包含了多项关键功能。 1. **列表渲染**：在移动端应用中，列表是最常见...
Vue移动端项目（一）
qq_48687155的博客
08-20 3247
Vue移动端项目
Vue中上传图片
热门推荐
yueye_wu的博客
09-09 1万+
Vue中上传图片的两种方式
移动端简易html的上传图片插件
09-11
简易的图片上传插件，适用于移动端，PC端。 简易的图片上传插件，适用于移动端，PC端。
jQuery移动端图片上传组件
11-25
本文实例为大家分享了移动端图片上传组件，供大家参考，具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片，并实现文件上传服务端 文件依赖 JQUERY 参数API loading:’.loading’, 页面显示loading的图标selector url:”, 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ….. isCompress:true, 如果是图片，可以开启客户端压缩，减少传输的数据文件 compressNum:0
html5移动端图片上传本地生成缩略图预览（单图上传）
11-19
html5移动端图片上传本地生成缩略图预览，单图上传
移动端上传图片裁剪插件
04-28
移动端上传图片裁剪插件,支持放大缩小,支持旋转,裁剪功能很强大
mbUploadifyjshtml5移动端文件图片上传插件
08-10
mbUploadify.js：html5移动端文件、图片上传插件
vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
weixin_31880681的博客
01-30 2855
组件 选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}javaScript代码export default {name: "cameras-and-albums",data(){return{imgList: [],datas: new FormData(),files:0,size:0}},methods:{//...
jQuery移动端图片文件上传插件
ICode联盟
01-14 638
下载地址https://yy123.ink/frontDetail/11436jQuery移动端图片文件上传插件是一款支持图片文件切片上传插件。 dd:
关于vue H5移动端自定义图片上传
weixin_43734043的博客
12-18 375
input覆盖在img之上隐藏 图片获取时使用FileReader的readAsDataURL进行转换 就不会报Not allowed to load local resource错误 <img v-if='headimgurl' :src="headimgurl" /> <input type="file" accept="image/*" class="img-up" @change="headChange" ref="imgChange" />
Vue 实现移动端图片裁剪上传组件
"vue移动端图片裁剪上传功能的实现方法" 在移动端应用开发中，图片裁剪上传是一项常见的需求，尤其在社交媒体、电商等场景中。Vue.js作为一个轻量级的前端框架，提供了丰富的插件和组件来实现这些功能。本教程将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值