js上傳圖片

vue上傳案例如下

<template><div id="upload_img"><!--方法一，new FileReader() base64格式上傳 --><div class="uploaded" @click="openBrowser" ><input type="file" name="img" imgtype="1" ref="img" @change="submitImg" /><img :src="src" class="img" v-if="!!this.src" ref="pic"/></div><!--方法二 ,new FormData() 文件上傳--><div class="uploaded" @click="openBrowser02" ><input type="file" name="img" imgtype="1" ref="img02" @change="submitImg02" /><img :src="src02" class="img" v-if="!!this.src02" ref="pic02"/></div></div> </template><script>export default {data(){return {file:'',src:'',src02:''}},methods:{/**方法一 base64形式，圖片上傳* */openBrowser(){this.$refs.img.click()},submitImg(e){this.file = e.target.files[0];let fr = new FileReader()let that = thisfr.onload =function(e){// 獲取加載對象的result,即srcthat.src = this.result;let data = {img:that.src,imgtype: that.$refs.img.getAttribute('imgtype')}that.sendImg(data)}fr.readAsDataURL(this.file)},sendImg(data){this.$ajax.post('/api/v1/save/img',data).then(res=>{console.log(res)this.src = res.data.src;})},/** 方法二 formData 圖片上傳* */openBrowser02(){this.$refs.img02.click()},submitImg02(e){var formData = new FormData(),file = e.target.files[0];formData.append('file',file);formData.append('type',1);this.$ajax({method: 'post',url: '/api/v1/save/img/src',data: formData}).then((res)=>{this.src02 = res.data.srcconsole.log(res)})}},mounted(){this.$nextTick(function () {})}} </script><style scoped>.uploaded{width: 200px;height: 100px;border: 1px solid gray;margin: 0 auto;position: relative;}.uploaded input{display: none;}.img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.show{display: block;}</style>

總結(jié)

以上是生活随笔為你收集整理的js上传图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。