上传图片，我们在做项目过程会经常遇到，在此，总结一下，方便以后工作，也可以为有兴趣的朋友提供一个思路，请看代码
load.html
<!DOCTYPE html>
<!--<html lang="en" manifest="../config/manifest.appcache">-->
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<title>上传文件</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/upload.css">
</head>
<body>
<div id="upload" class="upload">
<div class="select" v-on:click="selectimg">
<img src="../images/upload.png" alt="" >
</div>
<div class="img-wrap" id="imgwrap">
<div class="img" v-for="item in imgUrl">
<img src="" alt="" :src="item">
</div>
</div>
<div class="set-cache">
<button class="button button-primary " v-on:click="douploadImg()">暂时缓存</button>
</div>
<form id="imgForm" method="post" enctype="multipart/form-data" style="display: none;" >
<div class="form-group">
<input type="file" v-on:change="getimg" id="img" multiple>
</div>
</form>
</div>
<script data-main="../js/dev/upload.js" src="../js/lib/require/require.js"></script>
</body>
</html>
load.js
requirejs.config({
baseUrl: '../js/lib',//参照于引入这个js文件的index.html页面的相对路径,因为此时mian.js文件已经导入到了index.html
paths: {
'vue' : 'vue.min',
'axios':'axios.min',
'vue-resource':'vue-resource',
'localforage':'localforage',
'mock':'mock-min',
},
});
define([
'vue',
'axios',
'localforage',
],function (
Vue,
axios,
LocalForage) {
var aa = {
init:function () {
var app = new Vue({
el:'#upload',
data: {
imgUrl:[],
},
methods:{
// 点击图片模拟点击input
selectimg:function(){
// 原生方法模拟点击input，选择图片
document.getElementById('img').click()
},
// 选中图片回显
getimg:function (e) {
var vm = this;
// var myImg = document.getElementById('img');
var myImg = e.target;
var imgValu = myImg.value;
console.log(myImg.files)
// console.log(imgValu.match(/.doc|.gif|.png|.bmp/i))
// if(!imgValu.match(/.doc|.gif|.png|.bmp/i)){
// alert('上传图片不符合要求');
// return false;
// }
//获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
for(var i = 0;i <myImg.files.length;i++) {
var dataURL = windowURL.createObjectURL(myImg.files[i]);
vm.imgUrl.push(dataURL)
}
},
upload:function(){
var vm=this;
var form = document.getElementById('imgForm');
var formData = new FormData(form);
formData.append ("openId" , "12456");//如果有其他参数还可以通过该方法进行传递
formData.append ("imageType" , 1);
console.log(formData)
var url=g.baseUrl+"uploadImage";
vm.$http.post(url,formData).then(function(res){
alert("success");
console.log(res)
},function(){
alert('请求失败处理'); //失败处理
});
}
},
mounted:function () {
var vm = this;
}
})
}
};
aa.init();
});
load.scss
.upload{
.select{
width: 60px;
height: 60px;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
}
.img-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: center;
.img{
display: inline-block;
width: 120px;
height: 120px;
overflow: hidden;
flex: 0 0 100px;
text-align: center;
margin-top: 10px;
cursor: pointer;
border: 1px solid #cdcdcd;
padding: 10px;
img{
width: 100%;
height: 100%;
}
}
}
.set-cache{
position: fixed;
bottom: 30px;
width: 100%;
button{
width: 90%;
margin: 0 20px;
}
}
}
注意：
1、通过点击上传图片，模拟点击隐藏起来的上传图片form表单
selectimg:function(){
// 原生方法模拟点击input，选择图片
document.getElementById('img').click()
},
2、获取上传图片资源，回显在页面
var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
for(var i = 0;i <myImg.files.length;i++) {
var dataURL = windowURL.createObjectURL(myImg.files[i]);
vm.imgUrl.push(dataURL)
}
3、通过html5提供的FormData属性上传图片，通过append 添加需要的参数
var form = document.getElementById('imgForm');
var formData = new FormData(form);
formData.append ("openId" , "12456");//如果有其他参数还可以通过该方法进行传递
formData.append ("imageType" , 1);
网友评论