H5的上传图片如何实现呢？
以下是我用vue实现的图片上传功能，仅供参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>任务系统</title>
<script src="js/base.js"></script>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/inputImg.css">
<link rel="shortcut icon" href="#" />
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script>
</head>
<body>
<div id="app">
<textarea class='pingjiaContent' @input="descInput" maxlength='200' placeholder="请描述任务完成情况及截图" name="" id=""
cols="30" rows="4" v-model="desc">
</textarea>
<div class="imgBox">
<div class="uploadBox" v-for="(value, key) in imgs">
<img :src="getObjectURL(value)" alt="" class="uploadImg">
<img src="images/close.png" alt="" class="closeImg" @click='delImg(key)'>
</div>
<div class="inputButton">
<img src="images/add.png" alt="" class="addImg">
<input type="file" class="upload" @change="addImg" ref="inputer" multiple
accept="image/png,image/jpeg,image/gif,image/jpg" />
</div>
<div class="submitTask" @click="submit">
提交任务
</div>
<div class="back">
返回
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
formData: new FormData(),
imgs: {},
imgLen: 0,
txtVal: 0,
desc: "",
},
created() {
},
methods: {
descInput() {
// this.txtVal = this.desc.length;
},
addImg(event) {
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.fil = inputDOM.files;
console.log(inputDOM.files)
let oldLen = this.imgLen;
for (let i = 0; i < this.fil.length; i++) {
let size = Math.floor(this.fil[i].size / 1024);
if (size > 5 * 1024 * 1024) {
alert('请选择5M以内的图片！');
return false
}
this.imgLen++;
this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);
console.log(this.imgs);
}
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
delImg(key) {
this.$delete(this.imgs, key);
this.imgLen--;
},
// 提交上传图片
submit() {
console.log(this.imgs)
console.log(11)
for (let key in this.imgs) {
let name = key.split('?')[0];
console.log(this.imgs[key]);
this.formData.append(name, this.imgs[key]);
}
// $.ajax({
// url: '/material/uploadFile',
// type: 'POST',
// cache: false, //上传文件不需要缓存
// data: this.formData,
// processData: false, // 告诉jQuery不要去处理发送的数据
// contentType: false, // 告诉jQuery不要去设置Content-Type请求头
// success: function (data) {
// },
// error: function (data) {
// }
// })
},
}
});
</script>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
font-family: "微软雅黑";
background: #F8F8F8 !important;
}
#box {
width: 100%;
position: relative;
height: 100%;
}
.pingjiaContent {
width: 100%;
border-radius: 0.1rem;
/* border: 1px solid #CACACA; */
padding: 0.2rem;
box-sizing: border-box;
outline: none;
margin-bottom: 0;
border: none;
resize: none;
}
.uploadBox {
width: 2rem;
height: 2rem;
position: relative;
margin-right: 0.15rem;
margin-bottom: 0.35rem;
}
.uploadImg {
width: 100%;
height: 100%;
overflow: hidden;
}
.closeImg {
width: 0.5rem;
height: 0.5rem;
position: absolute;
top: 2%;
right: 1%;
}
.inputButton {
width: 2rem;
height: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #cdcdcd;
position: relative;
margin-right: 0.15rem;
margin-bottom: 0.35rem;
}
.addImg {
width: 1.2rem;
height: 1.2rem;
}
.upload {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.imgBox {
width: 100%;
background: #fff;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-bottom: 0.5rem;
box-sizing: border-box;
padding: 0.5rem;
}
.submitTask {
background: #EF504D;
width: 100%;
height: 0.8rem;
color: #fff;
font-size: 0.32rem;
line-height: 0.8rem;
text-align: center;
border-radius: 0.1rem;
margin-top: 0.8rem;
}
.back {
background: #F7F7F7;
width: 100%;
height: 0.8rem;
color: #4D4D4D;
font-size: 0.32rem;
line-height: 0.8rem;
text-align: center;
border-radius: 0.1rem;
margin-top: 0.4rem;
border: 1px solid #E0E0E0;
}
后台PHP只需要利用 获取到接收的文件即可实现上传。