上傳圖片，我們在做項目過程會經常遇到，在此，總結一下，方便以后工作，也可以為有興趣的朋友提供一個思路，請看代碼
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);
