Vue中使用input简易的上传图片

在这里插入图片描述

 <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>