This time, the image upload, echo, and editing functions are packaged. Let’s not
talk about the code. Look carefully at the comments in the code. The explanation is inside.
<template>
<el-upload v-model:file-list="fileList" :list-type="listType" class="avatar-uploader" :action="fileUploadUrl"
:on-success="handleAvatarSuccess" :on-remove="handleRemove" :before-upload="beforeAvatarUpload"
:accept="accept" :limit="limit" :on-exceed="handleExceed">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</template>
<script lang="ts" setup>
import {
ref,
reactive,
watch
} from "vue";
import {
useRouter,
useRoute
} from "vue-router";
import {
useStore
} from "vuex";
import {
ElMessage
} from "element-plus";
const router = useRouter();
const route = useRoute();
const store = useStore();
const fileList = reactive([]);
const listType = ref("picture-card");
const fileUploadUrl = import.meta.env.VITE_BASE_URL + "/files/files/uploadPart"; //上传得接口路径；可根据需求
//属性
const props = defineProps({
imgUrl: "",
limit:'',
accept:'',
mulTip: {
type: Boolean, default: false }
});
setTimeout(() => {
//文件回显,这里异步处理了，因为回显需要等待接口数据返回
if (props.imgUrl) {
let tmpArray=props.imgUrl.split(",");
tmpArray.forEach(item => {
fileList.push({
name: item,
url: item
})
});
}
}, 500);
//解析组件传过来的方法
const emits = defineEmits(["getUrl"]);
//上传成功回调
const handleAvatarSuccess=(res,file, uploadFiles) => {
//临时路径
let urls = [];
//处理文件list
uploadFiles.forEach(item => {
// 上传文件是带有response属性的，回显的文件没有。处理是为了回显再编辑文件的时候
if(item){
let rs=item.response;
if(rs){
let code=rs.code;
if(code==200){
let fileUrl=rs.data.fileUrl;
urls.push(fileUrl);
}
}else{
urls.push(item.url);
}
}
});
//返回父组件 给到指定字段赋值，多文件以逗号分隔
emits("getUrl", urls.toString());
};
//删除
const handleRemove = (uploadFile, uploadFiles) => {
//临时路径
let urls = [];
//处理文件list
uploadFiles.forEach(item => {
// console.log(el.response.fileUrl);
if(item){
let rs=item.response;
if(rs){
let code=rs.code;
if(code==200){
let fileUrl=rs.data.fileUrl;
urls.push(fileUrl);
}
}else{
urls.push(item.url);
}
}
});
//返回父组件 给到指定字段赋值，多文件以逗号分隔
emits("getUrl", urls.toString());
}
//文件限制
const handleExceed=(files, fileList)=> {
ElMessage.warning(`当前限制选择 ${
props.limit} 个文件，本次选择了 ${
files.length} 个文件，共选择了 ${
files.length + fileList.length} 个文件`);
}
//上传前的校验
const beforeAvatarUpload = (rawFile) => {
if (
rawFile.type !== "image/jpeg" &&
rawFile.type !== "image/png"
) {
ElMessage.error("只能上传jpg或png");
return false;
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error("文件大小不能超过2MB!");
return false;
}
return true;
};
//const handleChangePic = () => {
//if (props.mulTip) {
// if (fileList.value.length > 1) {
// fileList.value.splice(0, 1);
// }
//}
//}
</script>
<style lang="scss" scoped>
.avatar {
width: 100px;
height: 80px;
}
</style>
The next step is to use (for reference)
to pass multiple files and echo are separated by commas
<template>
//imgUrl 为绑定的字段 @getUrl方法为绑定的值 赋值 limit 为上传限制的个数 accept为上传限制格式
<Uploadimg
:imgUrl="userAuthForm.service.idCardFront"
@getUrl="getIdCardFrontUrl"
:limit="1"
accept=".png,.jpg"
></Uploadimg>
</template>
<script lang="ts" setup>
import Uploadimg from "@/components/upload/index.vue";
//上传参数
const userAuthForm = reactive({
service:{
idCardFront:""
}
})
// @getUrl方法
const getIdCardFrontUrl = (url) => {
userAuthForm.service.idCardFront = url;
};
</script>
Well, this is the end, if you have any questions, please leave a message to exchange