最简单的vue上传图片[通俗易懂] 大家好，欢迎来到IT知识分享网。 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25353.html<template>
<img :src="f.src" v-if="f" />
<img src="../../assets/zz.jpg" @click="add" v-else/>
<input class="value" style="display:none" type="file" ref="file" accept="image/*" multiple="multiple" @change="getFile($event)" />
</template>
<script> export default { data () { return { 'file': null, 'f': null } }, methods: { add () { this.$refs.file.click() }, getFile (event) { this.file = event.target.files[0] const item = { name: this.file.name, size: this.file.size, file: this.file } this.html5Reader(this.file, item) this.f = item }, // 将图片文件转成BASE64格式 html5Reader (file, item) { const reader = new FileReader() reader.onload = (e) => { this.$set(item, 'src', e.target.result) } reader.readAsDataURL(file) }, submitForm (event) { event.preventDefault() let formData = new FormData() formData.append('file', this.file) let config = { headers: { 'Content-Type': 'multipart/form-data' } } this.axios.post('http://127.0.0.1/index/index/upload', formData, config).then(function (res) {
console.log(res) if (res.status === 200) { } }) } } } </script>
赞 (0)
「VUE架构」VUE2.0 图片上传功能（移动端）「建议收藏」
上一篇
2023-07-26 20:33
VUE中页面跳转的常用方式及返回上一页实现的两种方式「建议收藏」
下一篇
2023-08-02 12:00
