最简单的vue上传图片
最简单的vue上传图片 大家好，又见面了，我是你们的朋友全栈君。 发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/148001.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】：
Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】：
官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
<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>
相关推荐
-
![windows cmd 查看端口占用[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
-
-
Android 多线程编程实验_android UI线程
Android 多线程编程实验_android UI线程线程的基本用法Android的多线程编程与Java多线程编程基本是使用相同的语法，比如定义一个线程只需要新建一个类继承自Thread，重写父类的run()方法classMyThread:Thread(){overridefunrun(){//编写具体的逻辑}}启动这个线程也很简单，创建MyThread的实例，调用start()方法，这样run()方法中的代码就会在子线程中运行了MyThread().start().
-
-
mysql拼接字段的函数_mysql拼接字符串
mysql拼接字段的函数_mysql拼接字符串MySQL的字符串拼接有三个函数CONCAT(str1,str2,…)CONCAT_WS(separator,str1,str2,…)GROUP_CONCAT(expr)这三个函数都各有作用，现在测试看看是什么样子的效果准备数据表CREATETABLE`user_info`(`id`int(11)NOTNULLAUTO_INCREMENT,`name`varchar(255)DEFAULTNULL,`age`int(3)DEFAULTNULL,
-
恢复服务器安装信息被破坏了,服务器存储瘫痪数据恢复成功案例-服务器数据恢复…
恢复服务器安装信息被破坏了,服务器存储瘫痪数据恢复成功案例-服务器数据恢复…一、服务器数据恢复故障描述机房突然断电导致整个存储瘫痪，加电后存储依然无法使用。经过用户方工程师诊断后认为是断电导致存储阵列损坏。整个存储是由12块日立硬盘(3TSAS硬盘)组成的RAID-6磁盘阵列，被分成一个卷，分配给几台Vmware的ESXI主机做共享存储。整个卷中存放了大量的Windows虚拟机，虚拟机基本都是模板创建的，因此系统盘都统一为160G。数据盘大小不确定，并且数据盘都是精简模…