參考：九宮格（圖片上傳）
? ? ? ? ? ?實(shí)現(xiàn)oss簽名直傳
? ??????????自定義圖標(biāo)
最終樣式：
1.html代碼
<div class="uploadImage">
? ? ? ? <input
? ? ? ? ? @change="fileChange($event)"
? ? ? ? ? type="file"
? ? ? ? ? id="upload_file"
? ? ? ? ? multiple
? ? ? ? ? style="display: none"
? ? ? ? >
? ? ? ? <p class="title titlepay">請(qǐng)上傳圖片(最多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" //刪除的圖標(biāo)路徑
? ? ? ? ? ? ? ? ? @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>?//相機(jī)的圖標(biāo)
? ? ? ? ? ? ? ? <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==''"
? ? ? ? >確認(rèn)提交</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';? //可解決測(cè)試時(shí)的跨域問(wèn)題
export default P({
? name: "x-address-edit",
? title: "圖片上傳",
? data() {
? ? return {
? ? ? imgList: [],
? ? ? size: 0,
? ? ? limit: 3, //限制圖片上傳的數(shù)量
? ? ? 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("請(qǐng)選擇圖片文件");
? ? ? } 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("請(qǐng)先添加圖片");
? ? ? }
? ? },
? ? 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);
? ? ? ? //上傳阿里云需要一個(gè)動(dòng)態(tài)的random
? ? ? ? ossData.append("key", res.data.dir + newFilename);
? ? ? ? ossData.append("success_action_status", 200); // 指定返回的狀態(tài)碼
? ? ? ? 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>
