vue實現(xiàn)簡單圖片上傳功能

更新時間：2022年03月02日 08:48:49 作者：Cryday

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下

就是給自己留個參照，有什么不合理的地方請大家指出來，然后調(diào)整

1.效果展示

2.html相關(guān)的代碼展示

<div class="form-list">
? ? ? ?<label class="label-one">商品圖片</label>
? ? ? ?<div class="add-picture">
? ? ? ? ?<ul>
? ? ? ? ? <li v-if="img_li1">
? ? ? ? ? ? ? <!-- 展示圖片 -->
? ? ? ? ? ? ? <div class="hasPic" v-if="img_1">
? ? ? ? ? ? ? ? ? ? ? <img class="seledPic" :src="this.imgdata.seledPic_1" />
? ? ? ? ? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? ? ? ? ? class="closepic"
? ? ? ? ? ? ? ? ? ? ? ? src="../../assets/images/close.png"
? ? ? ? ? ? ? ? ? ? ? ? @click="pichide('seledPic_1')"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <div class="selPic" v-else>
? ? ? ? ? ? ? ? ? ? ? <label for="picadd" class="picadd"></label>
? ? ? ? ? ? ? ? ? ? ? <input
? ? ? ? ? ? ? ? ? ? ? ? id="picadd"
? ? ? ? ? ? ? ? ? ? ? ? type="file"
? ? ? ? ? ? ? ? ? ? ? ? maxlength
? ? ? ? ? ? ? ? ? ? ? ? class="input-file"
? ? ? ? ? ? ? ? ? ? ? ? multiple="multiple"
? ? ? ? ? ? ? ? ? ? ? ? @change="onUpload($event,'seledPic_1')"
? ? ? ? ? ? ? ? ? ? ? ? accept="image/*"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? <li v-if="img_li2">
? ? ? ? ? ? ? ? ? ? <!-- 展示圖片 -->
? ? ? ? ? ? ? ? ? ? <div class="hasPic" v-if="img_2">
? ? ? ? ? ? ? ? ? ? ? <img class="seledPic" :src="this.imgdata.seledPic_2" />
? ? ? ? ? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? ? ? ? ? class="closepic"
? ? ? ? ? ? ? ? ? ? ? ? src="../../assets/images/close.png"
? ? ? ? ? ? ? ? ? ? ? ? @click="pichide('seledPic_2')"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <div class="selPic" v-else>
? ? ? ? ? ? ? ? ? ? ? <label for="picadd" class="picadd"></label>
? ? ? ? ? ? ? ? ? ? ? <input
? ? ? ? ? ? ? ? ? ? ? ? id="picadd"
? ? ? ? ? ? ? ? ? ? ? ? type="file"
? ? ? ? ? ? ? ? ? ? ? ? maxlength
? ? ? ? ? ? ? ? ? ? ? ? class="input-file"
? ? ? ? ? ? ? ? ? ? ? ? multiple="multiple"
? ? ? ? ? ? ? ? ? ? ? ? @change="onUpload($event,'seledPic_2')"
? ? ? ? ? ? ? ? ? ? ? ? accept="image/*"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? <li v-if="img_li3">
? ? ? ? ? ? ? ? ? ? <!-- 展示圖片 -->
? ? ? ? ? ? ? ? ? ? <div class="hasPic" v-if="img_3">
? ? ? ? ? ? ? ? ? ? ? <img class="seledPic" :src="this.imgdata.seledPic_3" />
? ? ? ? ? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? ? ? ? ? class="closepic"
? ? ? ? ? ? ? ? ? ? ? ? src="../../assets/images/close.png"
? ? ? ? ? ? ? ? ? ? ? ? @click="pichide('seledPic_3')"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <div class="selPic" v-else>
? ? ? ? ? ? ? ? ? ? ? <label for="picadd" class="picadd"></label>
? ? ? ? ? ? ? ? ? ? ? <input
? ? ? ? ? ? ? ? ? ? ? ? id="picadd"
? ? ? ? ? ? ? ? ? ? ? ? type="file"
? ? ? ? ? ? ? ? ? ? ? ? maxlength
? ? ? ? ? ? ? ? ? ? ? ? class="input-file"
? ? ? ? ? ? ? ? ? ? ? ? multiple="multiple"
? ? ? ? ? ? ? ? ? ? ? ? @change="onUpload($event,'seledPic_3')"
? ? ? ? ? ? ? ? ? ? ? ? accept="image/*"
? ? ? ? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <p class="prompt">提示：最多添加3張圖片，格式為jpg或png</p>
? ? ? ? ? ? <p class="prompt" v-if="tips">店鋪照片不能為空</p>
? ? </div>
</div>

3.css樣式代碼

.form-list {
? ? width: 100%;
? ? color: #666;
? ? font-size: 16px;
? ? margin: 0 0 20px 0;
}
.add-picture {
? ? overflow: hidden;
}
?
.add-picture ul li {
? ? float: left;
? ? margin: 0 20px 10px 0;
}
?
.add-picture .hasPic,
.add-picture .selPic {
? ? overflow: hidden;
? ? width: 86px;
? ? height: 86px;
? ? border-radius: 4px;
}
?
.add-picture .hasPic {
? ? position: relative;
}
?
.add-picture .hasPic img {
? ? display: block;
? ? width: 100%;
? ? height: 100%;
}
?
.add-picture .hasPic img.closepic {
? ? position: absolute;
? ? top: 0;
? ? right: 0;
? ? display: block;
? ? width: 25px;
? ? height: 25px;
}
?
.add-picture .selPic .picadd {
? ? display: block;
? ? width: 100%;
? ? height: 100%;
? ? background: url("../../assets/images/picadd.png");
? ? background-size: 100% 100%;
}
?
.add-picture .selPic input {
? ? display: none;
}
?
.add-picture .prompt {
? ? clear: both;
? ? margin: 0;
? ? font-size: 14px;
? ? color: #ff0000;
}

4、js相關(guān)代碼

export default {
? ?data() {
? ? ? ? return {
? ? ? ? ? ?// ?上傳圖片標識
? ? ? ? ? ?img_1: false,
? ? ? ? ? ?img_2: false,
? ? ? ? ? ?img_3: false,
? ? ? ? ? ?imgdata: {
? ? ? ? ? ? ? ? seledPic_1: "",
? ? ? ? ? ? ? ? seledPic_2: "",
? ? ? ? ? ? ? ? seledPic_3: ""
? ? ? ? ? ? ? ? },
? ? ? ? ? ?img_li1: true,
? ? ? ? ? ?img_li2: false,
? ? ? ? ? ?img_li3: false,
? ? ? ? }
? ? }，
?methods: {
? ? ? // 判斷圖片上傳類型
? ? ? produceImg(type, url) {
? ? ? ? let that = this;
? ? ? ? if (type == "seledPic_1") {
? ? ? ? ? that.img_1 = true;
? ? ? ? ? that.img_li2 = true;
? ? ? ? ? that.$set(that.imgdata, "seledPic_1", url);
? ? ? ? } else if (type == "seledPic_2") {
? ? ? ? ? that.img_2 = true;
? ? ? ? ? that.img_li3 = true;
? ? ? ? ? that.$set(that.imgdata, "seledPic_2", url);
? ? ? ? } else if (type == "seledPic_3") {
? ? ? ? ? that.img_3 = true;
? ? ? ? ? that.$set(that.imgdata, "seledPic_3", url);
? ? ? ? }
? ? ? },
? ? ? // 點擊關(guān)閉按鈕圖片隱藏
? ? ? pichide(type) {
? ? ? ? let that = this;
? ? ? ? if (type == "seledPic_1") {
? ? ? ? ? if (that.imgdata.seledPic_1 != "") {
? ? ? ? ? ? that.img_1 = false;
? ? ? ? ? ? that.img_li2 = false;
? ? ? ? ? }
? ? ? ? ? if (that.imgdata.seledPic_2 != "") {
? ? ? ? ? ? that.img_1 = false;
? ? ? ? ? ? that.img_li2 = true;
? ? ? ? ? }
? ? ? ? ? if (that.imgdata.seledPic_3 != "") {
? ? ? ? ? ? that.img_1 = false;
? ? ? ? ? ? that.img_li2 = true;
? ? ? ? ? ? that.img_li3 = true;
? ? ? ? ? }
? ? ? ? } else if (type == "seledPic_2") {
? ? ? ? ? if (that.imgdata.seledPic_1 != "") {
? ? ? ? ? ? that.img_2 = false;
? ? ? ? ? }
? ? ? ? ? if (that.imgdata.seledPic_2 != "") {
? ? ? ? ? ? that.img_2 = false;
? ? ? ? ? ? that.img_li3 = false;
? ? ? ? ? }
? ? ? ? ? if (that.imgdata.seledPic_3 != "") {
? ? ? ? ? ? that.img_2 = false;
? ? ? ? ? ? that.img_li3 = true;
? ? ? ? ? }
? ? ? ? } else if (type == "seledPic_3") {
? ? ? ? ? that.img_3 = false;
? ? ? ? }
? ? ? },
? ? ? //start 上傳圖片
? ? ? onUpload(e, type) {
? ? ? ? let file = e.target.files[0];
? ? ? ? let filesize = file.size;
? ? ? ? let filename = file.name;
? ? ? ? if (filesize > 10485760) {
? ? ? ? ? alert("圖片太大，無法上傳");
? ? ? ? } else {
? ? ? ? ? let reader = new FileReader();
? ? ? ? ? // 將圖片轉(zhuǎn)為base64位
? ? ? ? ? reader.readAsDataURL(file);
? ? ? ? ? reader.onload = function(k) {
? ? ? ? ? ? // 讀取到的圖片base64 數(shù)據(jù)編碼
? ? ? ? ? ? var imgcode = k.target.result;
? ? ? ? ? ? let data = {
? ? ? ? ? ? ? image: imgcode
? ? ? ? ? ? };
? ? ? ? ? ? axios({ ? ? ? ? ? ? ?
? ? ? ? ? ? ? url: "http://………………………………",//url地址
? ? ? ? ? ? ? method: "POST",
? ? ? ? ? ? ? data: qs.stringify(data)
? ? ? ? ? ? })
? ? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? let resdata = res.data;
? ? ? ? ? ? ? ? if (resdata.code == 200) {
? ? ? ? ? ? ? ? ? let url = resdata.info;
? ? ? ? ? ? ? ? ? this.produceImg(type, url);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? alert(resdata.msg);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? ? });
? ? ? ? ? }.bind(this);
? ? ? ? }
? ? ? },
? ? ? //end結(jié)束圖片
? ?}
}?

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: