<div class="boximg"><div class="topimg"><!-- <img :src="filePath" width="200px" height="170px" /> --></div><div class="botimg" @click="imgClick()">上傳logo</div></div><div class="box_img_bottom"><!-- v-if="Businesslicense.length > 0 ? false : true" --><div class="input" @click="imgClick()"></div><inputstyle="float: left; display: none"type="file"id="uploadFile"accept="image/*"@change="readLocalFile()"/> </div>

// 上傳圖片

filePath: “”,

//圖片上傳imgClick() {document.getElementById("uploadFile").click();},//點擊選中圖片readLocalFile() {var param = new FormData();let files = event.target.files[0];param.append("file", files, files.name); // append 中的 字符串名稱 根據后端接口提示修改console.log(files);try {new Promise((resolve, reject) => {ProjectList.uploadImage(param).then((response) => {console.log(response);}).catch((error) => {reject(error);});// 文本刪除document.getElementById("uploadFile").value = null;});event.target.value = " ";} catch (error) {}}, <style lang="less" scoped> .boximg {float: left;width: 180px;height: 170px;.topimg {width: 100%;height: 160px;border: 1px dashed #ccc;overflow: hidden;border-radius: 15px;img {width: 100%;height: 100%;}}.botimg {text-align: center;margin-top: 5px;color: blue;cursor: pointer;} } </style>

總結

以上是生活随笔為你收集整理的Vue中使用input简易的上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。