1. Components
<template>
<div class="component-upload-image">
<van-uploader
v-model="fileList"
style="margin-right: 10px"
accept="image/gif, image/jpg, image/jpeg, image/png"
:max-count="5"
upload-icon="plus"
:before-read="beforeRead"
:before-delete="beforeDelete"
:after-read="afterRead"
capture="camera"
/>
</div>
</template>
?
<script>
import { getToken } from "@/utils/auth";
import { Toast } from "vant";
import axios from "axios";
import { getUploadFile } from "@/api/report";
?
export default {
name: "UploadFileh5",
props: {
value: [String, Object, Array],
//Limit on the number of pictures
limit: {
type: Number,
default: 1
},
// Size limit (MB)
fileSize: {
type: Number,
default: 50
},
// File type, such as ['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg", "gif"]
},
// Whether to display prompts
isShowTip: {
type: Boolean,
default: true
},
needArrList: {
type: Boolean,
default: false
},
busiType: {
type: String,
default: ""
}
},
data() {
return {
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogVisible: false,
hideUpload: false,
headers: {
token: localStorage.getItem("token")
},
fileList: [],
fileObj1: undefined
};
},
computed: {
// Whether to display prompts
showTip() {
return this.isShowTip & amp; & amp; (this.fileType || this.fileSize);
}
},
watch: {
value: {
handler(val) {
if (val) {
this.fileList = val;
} else {
this.fileList = [];
return [];
}
},
deep: true,
immediate: true
}
},
created() {},
methods: {
// Determine file type
beforeRead(file) {
const _this = this;
if (
file.type != "image/png" & amp; & amp;
file.type != "image/jpg" & amp; & amp;
file.type != "image/jpeg"
) {
Toast("Please upload pictures in jpg, jpeg or png format");
return false;
}
?
return true;
},
dataURLtoFile(dataurl, filename) {
//Convert base64 to file file
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
},
// upload image
afterRead(file, detail) {
let result = file;
?
if (file.file.size > 200 * 1024) {
// console.log("Compression execution");
let canvas = document.createElement("canvas"); // Create Canvas object (canvas)
let context = canvas.getContext("2d");
let img = new Image();
img.src = file.content; // Specify the DataURL of the image (the base64 encoded data of the image)
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, img.width, img.height);
file.content = canvas.toDataURL(file.file.type, 0.92); // 0.92 is the default compression quality
file.file = this.dataURLtoFile(
file.content,
file.file.name
);
this.fileImgid(file, detail);
};
} else {
//If it meets the size, upload it directly
this.fileImgid(file, detail);
}
},
fileImgid(result, detail) {
const data = {
businessId: localStorage.getItem("terminalId"),
attachName: result.file.name,
baseString: result.content,
businesstype: "terminalQuestion",
businessTable: "tb_terminal_question"
};
?
const loading = Toast.loading({
forbidClick: true,
text: "Uploading, please wait..."
});
?
getUploadFile(data)
.then(res => {
if (res) {
// Return the image link after the request is successful
// this.fileList.push(res.attachPath);
// console.log("fileList----", this.fileList);
this.fileList[detail.index].picId = res;
} else {
Toast({
duration: 5000, //continue to display toast
message: "Upload failed"
});
this.fileList.splice(detail.index, 1);
}
})
.finally(() => {
loading.close();
});
},
// delete
beforeDelete(result, detail) {
if (result.picId) {
this.$emit("deleteTerminalImg", result.picId);
}
this.fileList.splice(detail.index, 1);
}
}
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card controls the plus part
::v-deep.hide .el-upload--picture-card {
display: none;
}
//Remove animation effect
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
}
?
::v-deep .el-list-enter,
.el-list-leave-active {
opacity: 0;
transform: translateY(0);
}
</style>
?
?
2. Use
<UploadFileh5 v-model="uploader" :busi-type="'terminalQue'" @deleteTerminalImg="deleteImg" />