vue實(shí)現(xiàn)簡單圖片上傳功能
更新時(shí)間：2022年03月02日 08:48:49 作者：Cryday
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡單圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下
就是給自己留個(gè)參照，有什么不合理的地方請(qǐng)大家指出來，然后調(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 {
? ? ? ? ? ?// ?上傳圖片標(biāo)識(shí)
? ? ? ? ? ?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);
? ? ? ? }
? ? ? },
? ? ? // 點(diǎn)擊關(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用Vue實(shí)現(xiàn)圖片上傳的三種方式
- vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
- vue+elementUI實(shí)現(xiàn)圖片上傳功能
- vue.js 圖片上傳并預(yù)覽及圖片更換功能的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)圖片上傳功能
- Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
- Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能 exif.js實(shí)現(xiàn)圖片上傳功能
- vue-quill-editor實(shí)現(xiàn)圖片上傳功能
- Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
- vue+element實(shí)現(xiàn)圖片上傳及裁剪功能
相關(guān)文章
Vue項(xiàng)目中引入ESLint校驗(yàn)代碼避免代碼錯(cuò)誤
這篇文章主要為大家介紹了Vue項(xiàng)目中引入ESLint插件校驗(yàn)代碼避免代碼錯(cuò)誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
在我的項(xiàng)目中,甲方要求系統(tǒng)登錄時(shí)對(duì)密碼進(jìn)行加密后再傳給后端,指定使用國密SM3,下面這篇文章主要給大家介紹了關(guān)于vue普通加密及國密SM2、SM3和sm4使用的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專門調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
vue router+vuex實(shí)現(xiàn)首頁登錄驗(yàn)證判斷邏輯
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁登錄判斷邏輯，用于判斷是否登錄首頁，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
vue使用WEB自帶TTS實(shí)現(xiàn)語音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實(shí)現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue?table表格中如何控制下拉框的顯示隱藏問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 讀取HTMLCollection列表的length為0問題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)的思路詳解
這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動(dòng)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11