vue实现图片上传到后台
本文实例为大家分享了vue实现图片上传到后台的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.3.min.js"></script>
<style>
.upload {
margin: 30px 40px 0;
width: 122px;
height: 122px;
padding-bottom: 40px;
position: relative;
float: left;
}
.upload .btn {
position: absolute;
left: 20px;
bottom: 0;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
color: #Fff;
border-radius: 5px;
background: #ff6c00;
}
.upload .btn .file {
display: inline-block;
position: absolute;
width: 80px;
height: 30px;
left: 0;
top: 0;
opacity: 0;
}
.upload .btn .add{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 30px;
text-align: center;
}
.upload .imgs {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border: 1px solid #ccc;
padding: 10px;
}
.upload .imgs img {
width: 100px;
height: 100px;
border: 1px solid #f1f1f1;
}
.upload .imgs .look {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
color: #fff;
}
</style>
</head>
<body>
<!-- 模态框 -->
<div class="madel-img"></div>
<div class="upload_wrap clearfix">
<div class="upload upload1 fl">
<div class="btn">
<span class="add">上传文件</span>
<input type="file" class="file" multiple>
<input type="hidden" class="imgUrl">
</div>
<div class="imgs">
<img src="shenfenzheng.jpg" alt="">
<div class="look">图片示范</div>
</div>
</div>
</div>
<script>
;(function($){
/* 上传图片 */
$.fn.upload = function(id){
this.id = id;
this.img = this.id.find($(".imgs img"));
this.img_src = this.id.find($(".imgs img")).attr("src");
this.file = this.id.find($(".file"));
this.look = this.id.find($(".look"));
this.imgUrl = this.id.find($(".imgUrl"));
var that = this;
this.file.on("change",function(){
var files = this.files;//获得上传的所有图片
var reader = new FileReader();//读取本地图片并显示
var name = files[0].name;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="png" && fileName !="bmp"){
layer.msg("图片格式不正确！");
that.img.attr("src",that.img_src)
return;
}
var fileSize = files[0].size;
var size = fileSize / 1024;
if(size>10000){
layer.msg("图片不能大于10M");
return;
}else if(size <= 0){
layer.msg("图片不能小于0M");
return;
}
reader.readAsDataURL(files[0]);//读取第一张图片的地址
//数据读取完成后改变src地址
reader.onload = function(){
that.look.css({"display":"none"});
var image = new Image();//本地缓存一张图片
var imgCur_src = this.result;//获取正在上传的图片
that.img.attr("src",imgCur_src);//吧刚开始的图片替换成上传的图片
}
var fd = new FormData();
fd.append("pic", files[0]);
$.ajax({
type: "POST",
contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
processData: false, //必须false才会自动加上正确的Content-Type
url: uploadUrl,
data: fd,
async: false,
beforeSend: function (request) {
request.setRequestHeader("Authorization", localStorage.token);
request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
},
success: function (msg) {
console.log(msg)
if (msg.code == "100") {
imgUrl.val(msg.data);
}
},
error: function (msg) {
console.log(msg);
}
});
})
}
$(".upload1").upload($(".upload1"));
})(jQuery)
</script>
</body>
</html>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue+elementUI实现图片上传功能
本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="
-
vue-quill-editor实现图片上传功能
问题描述 项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor.具体如何引用作者在项目中已经写得很明白了,我在这里就不再赘述. vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,楼主是将内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断
-
使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平
-
Vue.js 2.0 移动端拍照压缩图片上传预览功能
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上
-
vue.js 图片上传并预览及图片更换功能的实现代码
这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=
-
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg
-
基于vue+ bootstrap实现图片上传图片展示功能
效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"
-
vue+elementUI实现表单和图片上传及验证功能示例
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一
-
Vue2.0 实现移动端图片上传功能
本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple
-
基于vue-upload-component封装一个图片上传组件的示例
需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要