vue 实现文件上传和本地预览
1、图片上传imgUpload.vue<template><div><div><input v-show="false" type="file" accept="image/*" @change="changeFile($event)" ref="input"/><button @click="up...
·
1、图片上传imgUpload.vue
<template>
<div>
<div>
<input v-show="false" type="file" accept="image/*" @change="changeFile($event)" ref="input"/>
<button @click="uploadImgs">上传图片</button>
<div v-for="(item,index) in imgList" class="imgList" :key="Math.random()">
<img style="max-height:100%;max-width:100%;" :src="item"/>
<span class="delete" @click="deleteImg(index)"> X </span>
</div>
<div v-for="(item,index) in imgesList" class="imgList" :key="Math.random()">
<img style="max-height:100%;max-width:100%;" :src="item"/>
<span class="delete" @click="deleteImg(index)"> X </span>
</div>
<!--<input type="file" id="file"/>-->
<!--<button type="button" value="读取二进制数据" @click="readAsBinaryString()"/>-->
<!--<button type="button" value="读取文本文件" @click="readAsText()"/>-->
<!--<div id="result" name="result"></div>-->
</div>
</div>
</template>
<script>
import {uploadImg} from '../../../../apis/baseMessage/index'
export default {
data() {
return {
imgList: [],
imgesList: [],
};
},
methods: {
// 上传
uploadImgs() {
this.$refs.input.click();
},
changeFile: function (e) {
console.log("e", e)
let file = e.target.files[0];
//本地展示
//把file对象/blob对象 转化为base64,可以预览
var reader = new FileReader();
reader.readAsDataURL(file);
let _this = this;
reader.onload = function (e) {
_this.imgesList.push(this.result)
// _this.imgesList.push( "data:image/png;base64," + this.result.substring(this.result.indexOf(",") + 1))
};
//上传至服务器后本地展示
//在上传图片,基本采用的是上传file formData方式。一般上传blob对象和file对象都是可以的,但是
//有些后台只能是 file对象方式,这个时候需要把blob对象转化为file对象方式。
var forms = new FormData()
forms.append('file', file)
uploadImg(forms).then(res => {
if (res.status == 200) {
this.imgList.push(res.data.filePath)
} else {
}
}).catch(res => {
})
},
// 删除图片
deleteImg(index) {
this.imgList.splice(index, 1)
},
// readAsBinaryString() {
// var file = document.getElementById("file").files[0];
// var reader = new FileReader();
// //将文件以二进制形式读入页面
// reader.readAsBinaryString(file);
// reader.onload = function (e) {
// var result = document.getElementById("result");
// //显示文件
// result.innerHTML = this.result;
// }
// },
// readAsText() {
// var file = document.getElementById("file").files[0];
// var reader = new FileReader();
// //将文件以文本形式读入页面
// reader.readAsText(file);
// reader.onload = function (e) {
// var result = document.getElementById("result");
// //显示文件
// result.innerHTML = this.result;
// }
// }
}
}
</script>
<style scoped>
.imgList {
width: 100px;
height: 100px;
border: 1px solid #dddddd;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 10px;
}
.delete {
cursor: pointer;
position: absolute;
right: -5px;
top: -10px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)