一、使用element-ui
代码如下:
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
上述action是提交图片的地址,若需要穿参数可以使用el-upload的属性headers,然后就可以了,下面会拿到imageUrl,然后绑定在页面,显示在页面上,就完成了图片上传的功能。
二、利用H5上传图片
<template>
<div class="phone" for="upload" :class="{'card': useCategory === '3'}">
<input type="file" id="upload" accept="image/*" @change="openPhone" style="opacity:0;">
<img :src="headerImage" class="picture" alt="">
</div>
</template>
<script>
export default {
name: 'phone',
props: {
useCategory: '',
onThree: false,
isFlag: false
},
data() {
return {
icValue: '',
ocrResult: {},
headerImage: '',
}
},
methods: {
openPhone(e) {
if(!this.isFlag){
let files = e.target.files || e.dataTransfer.files
if (!files.length) return
this.picValue = files[0]
this.imgPreview(this.picValue)
}
},
imgPreview(file) {
let self = this
let Orientation