用到组件
vue2pc端项目一般搭配使用element组件,图片上传使用Upload组件,如果项目中有大量的图片上传功能,我们可以对Upload组件进行二次封装。
封装图片上传组件
<template>
<div class="imgContent">
<el-upload
class="avatar-uploader
action=""
:show-file-list="false"
:headers="headers"
before-upload="beforeAvatarUpload
:http-request="handleUpload"
>
<img v-if="value” :src="value” class="avatar" :style="{'width':width,'height':height}">
<i v-else class="el-icon-plus avatar-uploader-icon" :style="{'width':width,'height':height,'line-height':lineHeight}"></i>
</el-upload>
<div v-if="value" class="delete" @click="delImg">
<i class="el-icon-close"></i></div>
</div>
</template>
<script>
import [ authuploadFileForCms ] from "@/api/common.js
import {getToken } from "@/utils/auth.js"
export default {
props:{
value:{
type:string
default:''
},
delImg:{
type:Function
default:()=>{}
},
width: {
type: String,
default: '148px'
},
height: {
type: String,
default: '148px'
},
lineHeight: {
type: String,
default: '148px'
}
},
data(){
return {
headers:{
Authorization:"Bearer" + getToken(),//上传图片请求头携带token
}
}
}
},
methods:{
//图片上传前校验
beforeAvatarUpload(file){
const ispic = ['image/png','image/jpeg', 'image/gif', 'image/bmp', 'image/jpg'].includes(file.type)
const isLt5M = filesize/1024/1024 < 5
if(!ispic){
this.$message.error("请上传正确的图片格式)
return false
}
if(!isLt5M){
this.$message.error("上传图片大小不能超过5MB')
return false
}
//将文件读取为DatauRL,以data:开头的字符串
//const reader = new FileReader();
//reader.readAsDataURL(file);
//reader .onload = e => {
//this.editForm.productIcon = e.target.result
//}
},
//图片上传,ios和andorid只支持FormData,不支持base64
async handleUpload(obj){
let formData = new FormData();
formData.append("file",obj.file);
formData.append("fileUploadType","RESOURCEBIT FILE");
console.log(formData.get('file'))//此处打印需要加.get()
let res = await authUploadFileForCms(formData);
if(res.code==="0000"){
this .$emit('input',res.data.fileInfo.fileUri)
}else{
this.$message.error("上传失败')
}
<style scoped lang="scss">
.imgContent{
position:relative;
&:hover .delete{
display:block;
}
.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: 100px;
height: 100px;
line-height: 100px; */
text-align: center;
}
.avatar {
/* width: 100px;
height: 100px; */
display: block;
}
.delete{
width: 20px;
height: 20px;
background-color:
red;color: #fff;
border-radius: 50%;
position: absolute;
left: -10px;top: -10px;
display: none;
text-align: center;
line-height: 20px;
i{
vertical-align:
middle;font-size: 14px;
color: #fff;
}
}
</style>
组件中调用上传图片组件
<template>
<image-upload v-model="imgUrl" :delImg="delImg" width="100px" height="100px" line-height="100px"></image-upload>
</template>
<script>
import ImageUpload from "../commonUI/imageUpload .vue"
export default {
components:{
ImageUpload
},
data(){
return {
imgUrl:''
},
methods:{
delImg(){
this.imgUrl=''
}
}
}
</script>
<style>
</style>