参考：九宫格（图片上传）
最终样式：
1.html代码
<div class="uploadImage">
<input
@change="fileChange($event)"
type="file"
id="upload_file"
multiple
style="display: none"
>
<p class="title titlepay">请上传图片(最多3张)</p>
<div class="add-img">
<ul class="img-list">
<li v-for="(url, index) in imgList" :key="index">
<div>
<img
class="del"
src="../../assets/close-circle.png" //删除的图标路径
@click.stop="delImg(index)"
v-if="payEvidence==''"
>
<img class="app-bg" :src="url.file.src">
</div>
</li>
<li class="add" @click="chooseType" v-show="show" v-if="payEvidence==''">
<div class="add-image" align="center">
<van-icon class="icon-camera" name="camera" custom></van-icon> //相机的图标
<p class="font13" style="center">添加图片</p>
</div>
</li>
</ul>
</div>
</div>
<div class="btn">
<van-button
class="interval-normal-b"
@click="submit"
size="large"
v-if="payEvidence==''"
>确认提交</van-button>
</div>
</div>
2.style样式
//按钮
.checked {
font-size: 80px;
color: #38bb14;
}
.van-button--large {
height: 40px;
line-height: 40px;
margin-top: 30px;
}
.van-button--default {
color: #ffff;
background-color: #4bd126;
}
//图片上传
.app-bg > img {
width: 100%;
height: 100%;
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
}
.add-img {
width: 100%;
padding-top: 8px;
}
.add-img p {
color: #999;
}
.add {
display: inline-block;
margin-bottom: 20px;
text-align: center !important;
}
.add-image p {
text-align: center !important;
}
.add-image {
border: 1px dashed rgba(0, 0, 0, 0.2);
}
.add-image .icon-camera {
margin-top: 25px;
font-size: 30px;
}
.mui-btn-block {
border: 0;
border-radius: 0;
background-color: #87582e;
color: #fff;
margin-bottom: 0;
bottom: 0;
}
.mui-buttom {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
}
/*九宫格*/
.img-list {
overflow: hidden;
padding: 10px 12px;
padding-top: 0;
}
.img-list > li {
float: left;
width: 32%;
text-align: center;
padding-top: 31%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
}
.img-list > li > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-list > li > div .app-bg {
width: 100%;
height: 100%;
}
.mui-fullscreen {
z-index: 9999;
}
.del {
position: absolute;
width: 18px;
top: 0;
right: 0;
z-index: 999;
}
3.script代码
<script>
import axios from 'axios'; //可解决测试时的跨域问题
export default P({
name: "x-address-edit",
title: "图片上传",
data() {
return {
imgList: [],
size: 0,
limit: 3, //限制图片上传的数量
show: true,
payEvidence: ""
};
},
methods: {
chooseType() {
document.getElementById("upload_file").click();
},
fileChange(el) {
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = "";
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判断是否为文件夹
if (files[i].type != "") {
this.fileAdd(files[i]);
} else {
//文件夹处理
this.folders(fileList.items[i]);
}
}
},
//文件夹处理
folders(files) {
let _this = this;
//判断是否为原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function(file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
});
},
foldersAdd(entry) {
let _this = this;
entry.file(function(file) {
_this.fileAdd(file);
});
},
fileAdd(file) {
if (this.limit !== undefined) this.limit--;
if (this.limit !== undefined && this.limit < 0) return;
//总大小
this.size = this.size + file.size;
//判断是否为图片文件
if (file.type.indexOf("image") == -1) {
this.$toast("请选择图片文件");
} else {
let reader = new FileReader();
let image = new Image();
let _this = this;
reader.readAsDataURL(file);
reader.onload = function() {
file.src = this.result;
image.onload = function() {
let width = image.width;
let height = image.height;
file.width = width;
file.height = height;
_this.imgList.push({
file
});
if (_this.imgList.length == 3) {
_this.show = false;
}
console.log(_this.imgList);
};
image.src = file.src;
};
}
},
delImg(index) {
this.size = this.size - this.imgList[index].file.size; //总大小
this.imgList.splice(index, 1);
if (this.limit !== undefined) this.limit = 6 - this.imgList.length;
if (this.imgList.length >= 3) {
this.show = false;
} else {
this.show = true;
}
},
displayImg() {},
submit() {
const self = this;
let urls=[];
if (self.imgList.length > 0) {
for (let i = 0; i < self.imgList.length; i++) {
self.uploadFile(self.imgList[i].file).then(res=>{
urls.push(res);
});
}
..........
...........
}).then(res => {
if (res.code === 200) {
this.success();
} else {
this.$toast(res.message);
}
});
} else {
this.$toast("请先添加图片");
}
},
success() {
this.$toast("提交成功");
this.to("/allorder?type=5");
},
uploadFile(file) {
//xxxxxxx后端获取签名的接口
this.$get("xxxxxxx").then(res => {
debugger;
console.log(res);
let newFilename =
Math.round(new Date().getTime() / 1000) +
Math.ceil(Math.random() * 100000).toString() +
file.name;
var ossData = new FormData();
ossData.append("OSSAccessKeyId", res.data.accessid);
ossData.append("policy", res.data.policy);
ossData.append("Signature", res.data.signature);
//上传阿里云需要一个动态的random
ossData.append("key", res.data.dir + newFilename);
ossData.append("success_action_status", 200); // 指定返回的状态码
ossData.append("file", file,file.name);
axios.post(res.data.host, ossData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(ret => {
console.log(res.data.host+'/'+res.data.dir + newFilename);
return res.data.host+'/'+res.data.dir + newFilename;
})
.catch(err => {
console.log(err);
});
});
}
},
created() {
this.payEvidence = this.q.payEvidence;
if (this.payEvidence != "") {
this.payEvidence.split(";").forEach(item => {
if (item != "") {
this.imgList.push({ file: { src: item } });
}
});
}
}
});
</script>
网友评论