Public multi-type attachment image upload area in Vue page and applicable folding panel (sample code)
|
In front-end projects, attachment uploading is a very common function and is used in almost all app-related projects. Generally, when choosing to use a front-end UI framework, you can find the packaged image upload component in it, but in some cases it may not be suitable for your own project needs. The attachment upload area implemented in this article supports uploading of many types of attachments by type, and can specifically display certain types of attachment uploads according to specific conditions. This article is directly extracted from a specific page, and I will take the time to encapsulate a separate attachment upload component later. 1. Attachment display area code in Vue page
<div class="retuinfo">
<div class="theadInfo-headline">
<span></span>
{{FileDivName}}
</div>
<Collapse v-model="defaultCollapse">
<Panel v-for="(item,pngIndex) in pngFileArray" v-bind:key="pngIndex" :name="item.num" v-show="item.isshow">
{{item.name}}
<div class="obsfilesdiv" slot="content">
<div v-for="(obs,index) in item.files" v-bind:key="index" class="obsfileslist">
<input ref="fileImg" type="file" accept="image/*;capture=camera" style="display: none;"
@change="setObsFile(item.num,1,obs.FileType,obs.Num,obs.Code)">
<label style="color:#6d7180; font-size: 20px;">{{obs.FileType}}<span style="color:red;"
v-show="obs.FileType!='Other'">*</span></label>
<ul class="obsfilesul">
<li v-for="(objitem,objindex) in obs.FileObj" v-bind:key="objindex">
<img :src="objitem.imgurl ? objitem.imgurl : fileUrl"
@click="showObsFiles(obs.FileFlag,objitem.imgurl)" />
<img src="../../../img/other/wrong.png" v-show="objitem.IsCanEdit" class="wrong_class"
@click="deleteObsFlie(item.num,index,objindex,objitem.imgid,objitem.imgurl)" />
</li>
<li style="border: 4px solid #f3f3f3;" @click="PlusClick(obs.FileType,obs.FileFlag,obs.Num)">
<img src="../../../img/icon-adds.png" alt="" />
</li>
<div style="clear:both;"></div>
</ul>
</div>
</div>
</Panel>
</Collapse>
</div>
<div class="modal" v-show="viewBigImg">
<div class="img-view-modal" style="text-align: right;">
<img :src="viewImgURL" style="width: 100%;" @click="hideShow(0)">
<Icon type="md-close" style="margin-right: 20px;" size='20' @click="hideShow(0)" />
</div>
</div>
</div>The Vue project introduces the following UI frameworks: (If you want to use it right away, you need to introduce it in main.js first) IView, MintUI, Vant This code can be used normally as long as IView is introduced 2. Data Binding DesignI won't go into detail, but arrays and property control are easy to understand.
pngFileArray: [{
num: '0',
name: 'Complete vehicle',
isshow: localStorage.getItem("RoleName").indexOf('Nameplate Quality Inspector') != -1 ? true : false,
files: [ //FileFlag://1:Picture; 2:Video 3.Others {
FileType: 'Vehicle nameplate image',
Code: '201',
Num: 0,
FileFlag: 1,
FileObj: [],
IsNoFile: true
},
{
FileType: 'VIN image of vehicle frame',
Code: '207',
Num: 1,
FileFlag: 1,
FileObj: [],
IsNoFile: true
},
{
FileType: 'Terminal Image',
Code: '301',
Num: 2,
FileFlag: 1,
FileObj: [],
IsNoFile: true
}
]
},
{
num: '1',
name: 'Mileage',
isshow: localStorage.getItem("RoleName").indexOf('Account Manager') != -1 ? true : false,
files: [{
FileType: 'Odometer Photo',
Code: '701',
Num: 3,
FileFlag: 1,
FileObj: [],
IsNoFile: true
}
]
}
],3. Binding Method1. Image loading method:
//Get the image list getImageList() {
this.$indicator.open({
text: 'Image loading...',
spinnerType: 'snake'
});
let _this = this;
let downRequest = {
'crm_vin': this.parms.crm_vin,
'crm_vehiclenumber': this.parms.crm_vehiclenumber
};
let imgListParams = {
"ImageDownRequest": JSON.stringify(downRequest),
"username": localStorage.getItem("usernameone"),
"password": localStorage.getItem("password")
};
console.log("Get the image list parameters:", imgListParams);
_this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Configure request header this.$ajax.post(this.imageListUrl, this.$qs.stringify(imgListParams)).then(resdata => {
_this.$indicator.close();
console.log("Get the image list data:", resdata);
let data = resdata.data;
console.log("Converted image list data:", data);
if (resdata.status != 200) {
_this.$toast({
message: 'Failed to get the image list! ',
duration: 3000
});
return;
}
// Clear the original image list first_this.pngFileArray.forEach((rr,index,array) =>{
for(var file=0;file<rr.files.length;file++){
_this.pngFileArray[index].files[file].FileObj = [];
_this.pngFileArray[index].files[file].IsNoFile = true;
}
});
//Write the image list into each image classification area of the page for(var i=0;i<data.length;i++){
_this.pngFileArray.forEach((rr,index,array) => {
for(var file=0;file<rr.files.length;file++){
if(data[i].crm_imagetypeno==rr.files[file].Code){
let putparm = {
"IsCanEdit":false,
"imgid": data[i].crm_careimageId,
"imgurl": data[i].ImageUrl
};
_this.pngFileArray[index].files[file].FileObj.push(putparm);
_this.pngFileArray[index].files[file].IsNoFile = false;
}
}
});
}
}).catch(function(error) {
_this.$indicator.close();
_this.$toast({
message: error,
duration: 3000
});
});
},2. Picture display method
showObsFiles(type, url) { //Show pictures or videos console.log("Show attachments: " + type);
if (type == 1) { //Picture this.viewBigImg = true;
this.viewImgURL = url;
} else { //File this.$messagebox.alert("File viewing is not supported, please operate on PC!", "Prompt");
return;
}
},3. Related methods for uploading pictures (The original design was to support uploading of pictures, videos and other types of files, which has been implemented in the project and will not be expanded in this article)
PlusClick(type, flag, num) {
console.log("Current attachment type: " + type);
console.log("Current attachment number: " + num);
this.currentFileType = type;
if (flag == 1) { // Image upload this.$refs.fileImg[num].dispatchEvent(new MouseEvent('click'));
} else if (flag == 2) { // Video upload this.$refs.fileVideo[num].dispatchEvent(new MouseEvent('click'));
} else { // Other types of files this.$refs.filElem[num].dispatchEvent(new MouseEvent('click'));
}
},
setObsFile(classify, type, obsFileType, num, code) { //Save the image to crm var _this = this;
var inputFile; //File stream console.log("Image classification: " + classify + " " + obsFileType + " " + num) + "Image encoding: " + code;
if (type == 1) {
inputFile = this.$refs.fileImg[num].files[0];
this.$refs.fileImg[num].value = '';
}
var fileName = inputFile.name;
if (!inputFile) {
return;
}
if (inputFile.type == 'image/jpg' || inputFile.type == 'image/jpeg' || inputFile.type == 'image/png' ||
inputFile.type ==
'image/gif') {} else {
this.$messagebox.alert("Please upload a picture", "Prompt");
return;
}
_this.$indicator.open({
text: 'File uploading, please wait...',
spinnerType: 'snake'
});
//Image compression and conversion into base64 file stream var reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onloadend = function(e) {
let result = this.result;
console.log('********Uncompressed image size********:' + result.length / 1024)
_this.pulic.dealImage(result, {}, function(base64) {
console.log('********Compressed image size********:' + base64.length / 1024)
_this.putObsFile(classify, fileName, base64, obsFileType, code);
});
//reader.result.substring(this.result.indexOf(',')+1);
// 'data:image/png;base64,'+reader.result
}
},
putObsFile(classify, fileName, base64, obsFileType, code) { //Extract the public uploaded image file method var _this = this;
let usernameone = this.$Base64.encode("administrator");
let password = this.$Base64.encode("pass@word1");
let parmsImages = {
crm_newenergyid: localStorage.getItem("crm_newenergyid"),
vin: _this.parms.crm_vin,
crm_vehiclenumber: _this.parms.crm_vehiclenumber,
CareType: code,
CreateBy: localStorage.getItem("SystemUserId"),
ImageStr: base64.split(",")[1],
username: usernameone,
password: password
}
let parms = {
ImageMessage: JSON.stringify(parmsImages)
}
console.log(JSON.stringify(parmsImages));
console.log(JSON.stringify(parms));
_this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Configure request header _this.$ajax.post(_this.imageSaveUrl, _this.$qs.stringify(parms))
.then(resdata => {
_this.$indicator.close();
console.log("Interface response data:", resdata);
let data = resdata.data;
console.log("Converted response data:", data);
if (resdata.status != 200) {
_this.$toast({
message: 'Save failed! Interface call exception',
duration: 3000
});
return;
}
//Write the uploaded image url back to the image classification url on the page console.log("All image types under the current classification: " + JSON.stringify(_this.pngFileArray[parseInt(classify)].files));
for (var i = 0; i < _this.pngFileArray[parseInt(classify)].files.length; i++) { //Traverse the image type array under the current category and assign the data returned by the background if (obsFileType == _this.pngFileArray[parseInt(classify)].files[i].FileType) {
//Set the image file path etc. putparm
let putparm = {
"IsCanEdit":true,
"imgid": data.crm_careimageId,
"imgurl": data.ImageUrl
};
_this.pngFileArray[parseInt(classify)].files[i].FileObj.push(putparm);
_this.pngFileArray[parseInt(classify)].files[i].IsNoFile = false;
}
}
_this.$messagebox.alert("Attachment uploaded successfully", "Prompt");
}).catch(err => {
console.log(JSON.stringify(err));
_this.$toast({
message: 'Upload failed',
duration: 1500
});
_this.$indicator.close();
});
},4. How to delete pictures (In this article, only unsubmitted images can be deleted. Submitted images, i.e. images obtained when the page is initially loaded, cannot be deleted.)
deleteObsFlie(classify,num,index,id,url) { //Delete attachment var _this = this;
this.$messagebox.confirm('Are you sure you want to delete this image?', "Confirm").then(action => {
var del_param = {
"id": id,
"url": url
};
_this.$indicator.open({
text: 'Deleting pictures, please wait...',
spinnerType: 'snake'
});
_this.$ajax.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Configure request header _this.PromiseCall(_this.DelImgFilesURL, _this.$qs.stringify(del_param))
.then(data => {
_this.$indicator.close();
console.log(JSON.stringify(data));
if (data.status != 200) {
_this.$messagebox.alert("Failed to delete the image", "prompt");
return;
}
_this.pngFileArray[parseInt(classify)].files[num].FileObj.splice(index, 1);
_this.$toast({
message: 'Deleted the image successfully',
duration: 1500
});
}).catch(err => {
_this.doCatch(err);
_this.$toast({
message: 'Failed to delete the image'+err,
duration: 1500
});
_this.$indicator.close();
});
});
},4. CSS style
.retuinfo {
width: 96%;
height: auto;
margin-top: 20px;
margin-left: 2%;
background-color: #F5F7FA;
border-radius: 15px;
}
.theadInfo-headline {
width: 100%;
height: 80px;
background: #F3F3F3;
display: flex;
padding-left: 30px;
align-items: center;
font-size: 28px;
color: #666666;
border-radius: 15px;
}
.theadInfo-headline span {
width: 6px;
height: 32px;
background: #5576AB;
border-radius: 3px;
margin-right: 10px;
}
.ivu-collapse-header {
height: 40px;
align-items: center;
display: flex;
}
.obsfilesdiv {
width: 100%;
height: auto;
margin-top: .5rem;
margin-bottom: 50px;
}
.obsfileslist {
width: 100%;
height: auto;
padding: 0.5rem 0.5rem;
background: #fff;
}
.obsfilesul {
width: 100%;
height: auto;
padding-bottom: 8px;
}
.obsfilesul li {
width: 120px;
height: 120px;
float: left;
margin-top: .3rem;
overflow: hidden;
margin-right: .3rem;
border: none;
}
.obsfilesul li img {
width: 100%;
height: 100%;
}
.imglist {
width: 100%;
margin-top: .5rem;
margin-bottom: 6rem;
}
.modal {
background-color: #A9A9A9;
position: fixed;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 4rem;
/*opacity: 0.5;*/
align-items: center;
/*Define the vertical center of the body element*/
justify-content: center;
/*Define the horizontal center of the elements in the body*/
}
.modal img {
animation-name: zoom;
animation-duration: 0.6s;
display: block;
padding: 10px;
margin: auto;
max-width: 100%;
max-height: 100%;
box-shadow: 0 2px 6px rgb(0, 0, 0, 0), 0 10px 20px rgb(0, 0, 0, 0);
border-radius: 12px;
border: 1px solid white;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.showname {
width: 100px;
height: 60px;
position: relative;
top: -4.5rem;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
}
.wrong_class {
width: 30% !important;
height: 30% !important;
position: relative;
top: -3.8rem;
left: 2.6rem;
}
.wrongs_class {
width: 4% !important;
height: 4% !important;
position: relative;
/*top: -5.2em;*/
left: 0.5rem;
}Finally, the actual effect diagram is attached:
This concludes this article about the public multi-type attachment image upload area in the Vue page and the applicable folding panel. For more relevant Vue multi-type attachment image upload content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML page jump passing parameter problem
>>: Bootstrap3.0 study notes table related
Recommend
How to count the number of specific characters in a file in Linux
Counting the number of a string in a file is actu...
What to do if you forget the initial password when installing MySQL on Mac
Forgetting the password is a headache. What shoul...
Mysql database master-slave separation example code
introduce Setting up read-write separation for th...
Detailed introduction to CSS priority knowledge
Before talking about CSS priority, we need to und...
Detailed explanation of how to use the vue verification code component
This article example shares the specific implemen...
CSS sets the box container (div) height to always be 100%
Preface Sometimes you need to keep the height of ...
Brief analysis of MySQL union and union all
In the database, both UNION and UNION ALL keyword...
Xhtml special characters collection
nbsp   no-break space = non-breaking spa...
Centos7 installation of MySQL8 tutorial
MySQL 8 new features: My personal opinion on MySQ...
How to delete all contents in a directory using Ansible
Students who use Ansible know that Ansible only s...
Detailed explanation of the use of HTML header tags
HTML consists of two parts: head and body ** The ...
css add scroll to div and hide the scroll bar
CSS adds scrolling to div and hides the scroll ba...
Steps for customizing node installation to change the default installation path of npm global modules
I installed node to the D drive, and I also neede...
Docker installation tutorial in Linux environment
1. Installation environment Docker supports the f...
A detailed introduction to deploying RabbitMQ environment with docker
Prerequisites: Docker is already installed 1. Fin...